Размер фона: обложка при наведении трансфокатора

Question

Я хочу сделать эффект увеличения, когда пользователь наводит ссылку (div) с фоном изображения.

Я не знаю, как это сделать, когда я хочу масштабировать только фон, а не текст! И я не могу найти лучший способ.

Вот код (не работает, как я хочу):

.light_blue { 
 
    display: block; 
 
    color: #fff; 
 
    background-repeat: no-repeat; 
 
    -webkit-background-size: cover; 
 
    -moz-background-size: cover; 
 
    -o-background-size: cover; 
 
    background-size: cover; 
 
    background-position: center; 
 
    width: 100%; 
 
} 
 
a.light_blue:hover { 
 
    text-decoration: none; 
 
    color: #fcb428; 
 
} 
 
div.wrap { 
 
    height: 33%; 
 
    width: 33%; 
 
    overflow: hidden; 
 
    position: relative; 
 
} 
 
.wrap { 
 
    -moz-transition: all .5s; 
 
    -webkit-transition: all .8s; 
 
    transition: all .8s; 
 
    background-position: center center; 
 
} 
 
.wrap:hover { 
 
    -webkit-background-size: 120%; 
 
    -moz-background-size: 120%; 
 
    -o-background-size: 120%; 
 
    background-size: 120%; 
 
} 
 
.bg_flat { 
 
    position: absolute; 
 
    font-family: "Archivo Narrow"; 
 
    background: url(http://hokejfan.pl/hokej2015/kluby/img/black_bg4.png); 
 
    background-size: contain; 
 
    bottom: 0px; 
 
    padding: 5px; 
 
} 
 
.bg_naglowek { 
 
    text-transform: uppercase; 
 
    font-size: 29px; 
 
} 
 
.bg_flat2 { 
 
    position: absolute; 
 
    background: url(../img/black_bg4.png); 
 
    background-size: contain; 
 
    font-family: "Archivo Narrow"; 
 
    bottom: 5px; 
 
    width: -webkit-calc(100% - 10px); 
 
    width: calc(100% - 10px); 
 
    padding: 15px; 
 
}

<div class="col-sm-4" style="padding: 5px;"> 
 
    <a href="#news" class="light_blue wrap" style="background-image: url('http://hokejfan.pl/hokej2015/kluby/static/images2/48b51db749e3d9d992a61d289bc3c535.jpg'); height: 180px;"> 
 
    <div class="bg_flat2"> 
 
     <b class="bg_naglowek">Hello World</b> 
 
    </div> 
 
    </a> 
 
</div>

Answer 1

этот код на самом деле для использования трансфокатора эффект .. это зависит от вас, чтобы установить уровень масштаба ,

wrap:hover { 
    -webkit-transform: scale(1.2); 
    -ms-transform: scale(1.2); 
    transform: scale(1.2); 
} 

Answer 2

Чтобы оживить background-size свойство, вам нужно установить его для нормальной и состояние парения. Тогда будет работать transition.

.light_blue { 
 
    display: block; 
 
    color: #fff; 
 
    background-repeat: no-repeat; 
 
    -webkit-background-size: cover; 
 
    -moz-background-size: cover; 
 
    -o-background-size: cover; 
 
    background-size: cover; 
 
    background-position: center; 
 
    width: 100%; 
 
} 
 
a.light_blue:hover { 
 
    text-decoration: none; 
 
    color: #fcb428; 
 
} 
 
div.wrap { 
 
    height: 33%; 
 
    width: 33%; 
 
    overflow: hidden; 
 
    position: relative; 
 
} 
 
.wrap { 
 
    -moz-transition: all .5s; 
 
    -webkit-transition: all .8s; 
 
    transition: all .8s; 
 
    background-position: center center; 
 
    background-size: 100%; 
 
} 
 
.wrap:hover { 
 
    -webkit-background-size: 120%; 
 
    -moz-background-size: 120%; 
 
    -o-background-size: 120%; 
 
    background-size: 120%; 
 
} 
 
.bg_flat { 
 
    position: absolute; 
 
    font-family: "Archivo Narrow"; 
 
    background: url(http://hokejfan.pl/hokej2015/kluby/img/black_bg4.png); 
 
    background-size: contain; 
 
    bottom: 0px; 
 
    padding: 5px; 
 
} 
 
.bg_naglowek { 
 
    text-transform: uppercase; 
 
    font-size: 29px; 
 
} 
 
.bg_flat2 { 
 
    position: absolute; 
 
    background: url(../img/black_bg4.png); 
 
    background-size: contain; 
 
    font-family: "Archivo Narrow"; 
 
    bottom: 5px; 
 
    width: -webkit-calc(100% - 10px); 
 
    width: calc(100% - 10px); 
 
    padding: 15px; 
 
}

<div class="col-sm-4" style="padding: 5px;"> 
 
    <a href="#news" class="light_blue wrap" style="background-image: url('http://hokejfan.pl/hokej2015/kluby/static/images2/48b51db749e3d9d992a61d289bc3c535.jpg'); height: 180px;"> 
 
    <div class="bg_flat2"> 
 
     <b class="bg_naglowek">Hello World</b> 
 
    </div> 
 
    </a> 
 
</div>

Answer 3

Вы не можете плавно анимировать background-size свойство, если он установлен в cover. Но вы можете подделать его, анимируя transform. И поскольку вам нужно только масштабировать изображение, а не содержимое, вам понадобится дочерний элемент, предназначенный для отображения изображения (сделанный с псевдоэлементом в приведенном ниже примере).

.wrap { 
 
    width: 33%; 
 
    padding-bottom: 20%; 
 
    overflow: hidden; 
 
    position: relative; 
 
    transition: all .8s; 
 
    background: url(http://hokejfan.pl/hokej2015/kluby/static/images2/48b51db749e3d9d992a61d289bc3c535.jpg); 
 
    background-position: center center; 
 
    background-size: cover; 
 
} 
 

 
.wrap::before { 
 
    content:""; 
 
    position:absolute; top:0;right:0;bottom:0;left:0; 
 
    background:inherit; 
 
    transition:inherit; 
 
} 
 
.wrap:hover::before { 
 
    transform: scale(1.2); 
 
} 
 

 
.content { 
 
    position: relative; 
 
}

<div class="wrap"> 
 
    <div class="content">Content</div> 
 
</div>