Zoom-Effekt css3 dehne mein Bild

Question

Ich möchte diesen Effekt erstellen:

Bild auf Schweben wird dunkler und zoomt es ein wenig. Ich habe den Effekt, aber mein Ausgangsbild ist gestreckt. Ich kenne die Hintergrundbildgröße nicht, nur möchte das Bild ein wenig zoomen, wenn der Benutzer schwebt.

.highlight{ 
    background-size: 100% 100%; 
    -moz-transition: background-size 3s ease, background-color 3s ease; 
    -webkit-transition: background-size 3s ease, background-color 3s ease; 
    transition: background-size 3s ease, background-color 3s ease; 
} 

.highlight:hover{ 
    background-size: 120% 120%; 
    background-color:rgba(0,0,0,0); 
    -moz-transition: background-size 3s ease, background-color 3s ease; 
    -webkit-transition: background-size 3s ease, background-color 3s ease; 
    transition: background-size 3s ease, background-color 3s ease; 
} 

.highlight:hover:before{ 
    content: ""; 
    display: inline; 
    width: 100%; 
    height: 100%; 
    background-color:rgba(0,0,0,0.7); 
    -moz-transition: background-size 3s ease, background-color 3s ease; 
    -webkit-transition: background-size 3s ease, background-color 3s ease; 
    transition: background-size 3s ease, background-color 3s ease; 
} 

<div class="col-xs-12 col-sm-12 col-md-6"> 
<div class="highlight" style="background-image:url(image-url)"> 
    <div class="content"> 
     <h3>Text</h3> 
     <p class="large">More text text text</a> 
    </div> 
</div> 
</div> 
<div class="col-xs-12 col-sm-12 col-md-6"> 
<div class="highlight" style="background-image:url(image-url2)"> 
    <div class="content"> 
     <h3>Text2</h3> 
     <p class="large">More text text text2</a> 
    </div> 
</div> 
</div> 

Answer 1

Ist das, was Sie suchen?

.highlight{ 
 
    position: relative; 
 
    height: 300px; 
 
    background-size: 100%; 
 
    background-position: center top; 
 
    -moz-transition: background-size 3s ease; 
 
    -webkit-transition: background-size 3s ease; 
 
    transition: background-size 3s ease; 
 
} 
 
.highlight:hover{ 
 
    background-size: 120%; 
 
    background-color:rgba(0,0,0,0); 
 
    -moz-transition: background-size 3s ease; 
 
    -webkit-transition: background-size 3s ease; 
 
    transition: background-size 3s ease; 
 
} 
 

 
.highlight:before{ 
 
    content: ' '; 
 
    position: absolute; 
 
    left: 0; top: 0; 
 
    right: 0; bottom: 0; 
 
    background-color:rgba(0,0,0,0); 
 
    -moz-transition: background-color 3s ease; 
 
    -webkit-transition: background-color 3s ease; 
 
    transition: background-color 3s ease; 
 
} 
 
.highlight:hover:before{ 
 
    background-color:rgba(0,0,0,0.7); 
 
    -moz-transition: background-color 3s ease; 
 
    -webkit-transition: background-color 3s ease; 
 
    transition: background-color 3s ease; 
 
}

<div class="highlight" style="background-image:url(http://lorempixel.com/1100/700/nature/2/)"> 
 
    <div class="content"> 
 
     <h3>Text</h3> 
 
     <p class="large">More text text text</p> 
 
    </div> 
 
</div>