css/smarty изменение размера контейнера при зависании

Question

Как я могу изменить размер контейнера при наведении, чтобы он выглядел на картинке. Возможно ли только css/Smarty?

Вот Ссылка на картинке: http://www.bilder-upload.eu/upload/bc5052-1485274659.jpg

Answer 1

Вы можете создать этот эффект масштабирования, который изменяет масштаб изображения по сравнению с другими элементами, использующими transform: scale(). Вот пример.

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>