Hintergrundgröße: Abdeckung auf Hover Zoom Übergang

Question

Ich möchte Zoom-Effekt machen, wenn Benutzer Hover Link (div) mit Bildhintergrund.

Ich weiß nicht, wie es geht, wenn ich nur Hintergrund nicht Text zoomen möchte! Und ich kann den besten Weg nicht finden.

ist hier ein Code (funktioniert nicht wie ich will):

.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

dies der Code tatsächlich für Effekt Verwendung Zoom .. es hängt von der Skalierung Pegel einzustellen .

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

Answer 2

Um die background-size Eigenschaft zu animieren, müssen Sie es für den normalen und den Schwebezustand versetzen. Dann wird transition funktionieren.

.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

Sie können die background-size Eigenschaft nicht glatt animieren, wenn es um cover gesetzt wird. Aber Sie können es vortäuschen, indem Sie stattdessen transform animieren. Und da nur das Bild skaliert werden soll und nicht der Inhalt, benötigen Sie ein untergeordnetes Element, das für die Anzeige des Bildes vorgesehen ist (im folgenden Beispiel mit einem Pseudo-Element).

.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>