css/smarty Ändern der Größe eines Containers bei Hover

Question

Wie kann ich die Größe eines Containers bei Hover ändern, so dass es wie im Bild aussieht. Ist das nur mit CSS/Smarty möglich? Hier

ist der Link zum Bild: http://www.bilder-upload.eu/upload/bc5052-1485274659.jpg

Answer 1

Sie können erstellen, den Zoom-Effekt, der über andere Elemente zoomt transform: scale() verwenden. Hier ist ein Beispiel.

img { 
 
    max-width: 200px; 
 
    transition: transform .5s; 
 
    transform-origin: 50% 0; 
 
    background: #fff; 
 
} 
 

 
footer { 
 
    background: #111; 
 
    color: #fff; 
 
    padding: 2em 0; 
 
} 
 

 
.shirts { 
 
    text-align: center; 
 
} 
 

 
a:hover img { 
 
    transform: scale(1.2); 
 
}

<div class="shirts"> 
 
    <a href="#"><img src="https://www.customink.com/mms/images/catalog/styles/4600/catalog_detail_image_medium.jpg"></a> 
 
    <a href="#"><img src="https://www.customink.com/mms/images/catalog/styles/4600/catalog_detail_image_medium.jpg"></a> 
 
</div> 
 
<footer>footer</footer>