Hoover Zoom-Effekt mit mehreren Bildern und halte Bild Dimension

Question

Ich versuche, einen Hover Zoom-Effekt mit mehreren Bildern zu machen:

• Bilder auf der Seite zentriert sind
• Dimensionen zu halten, während in
• Bild zoomen Breite eingestellt ist inline bei img-Tag

Hier ist, was ich bisher versucht:

.img-zoom { 
 
display: inline-block; 
 
width: 100%; 
 
height: 100%; 
 
position: relative; 
 
overflow: hidden; 
 
} 
 
.img-zoom img { 
 
-webkit-transform: scale(1.04); 
 
-ms-transform: scale(1.04); 
 
transform: scale(1.04); 
 
-webkit-transition: 0.4s ease; 
 
transition: 0.4s ease; 
 
margin: 0px 20px; 
 
} 
 
.img-zoom img:hover { 
 
-webkit-transform: scale(1.21); 
 
-ms-transform: scale(1.21); 
 
transform: scale(1.21); 
 
}

<div style="text-align: center;padding: 5px;"> 
 
    <div class="img-zoom"> 
 
     <img src="http://lorempixel.com/600/210" width="300" /> 
 
     <img src="http://lorempixel.com/600/210" width="300"/> 
 
    </div> 
 
</div>

... aber die Bilder erstrecken sich auf Maus schweben.

Answer 1

Es klingt, als ob die Bilder vergrößert werden sollen, ohne dass sich ihre Breite/Höhe ändert. Ich habe Ihren HTML-Code etwas modifiziert und den Inline-Parameter width auf das Element .img-zoom gesetzt. Ich denke, das schafft, was Sie brauchen.

.img-zoom { 
 
    display: inline-block; 
 
    position: relative; 
 
    overflow: hidden; 
 
} 
 
.img-zoom img { 
 
    display: block; 
 
    width: 100%; 
 
    transition: 0.4s ease; 
 
    transform-origin: 50% 50%; /* center zoom */ 
 
} 
 
.img-zoom img:hover { 
 
    transform: scale(1.21); 
 
}

<div style="padding: 5px; text-align: center;"> 
 
    <div class="img-zoom" style="width: 300px;"> 
 
    <img src="http://lorempixel.com/600/210" /> 
 
    </div> 
 
    <div class="img-zoom" style="width: 300px;"> 
 
    <img src="http://lorempixel.com/600/210"/> 
 
    </div> 
 
</div>