Search code examples
csshoversizecontainerssmarty

css /smarty changing the size of a container on hover

How can i change the size of a container on hover so that it looks like in the Picture. Is it possible with only css/Smarty?

Here is the Link to the Picture: http://www.bilder-upload.eu/upload/bc5052-1485274659.jpg

Solution

  • You can create that zoom effect that zooms over other elements using transform: scale(). Here's an example.

    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>