JSFiddle - React, Tailwind, and code Playground

by Zvonimir1308

HTML

<div id="#container">
    <a href="https://as.ftcdn.net/r/v1/pics/7b11b8176a3611dbfb25406156a6ef50cd3a5009/home/discover_collections/optimized/image-2019-10-11-11-36-27-681.jpg"><img src="https://as.ftcdn.net/r/v1/pics/7b11b8176a3611dbfb25406156a6ef50cd3a5009/home/discover_collections/optimized/image-2019-10-11-11-36-27-681.jpg"></a>
</div>

CSS

a[href $= ".jpg"] {
    margin: 20px;
    border: 1px solid black;
    overflow: hidden;
  }

  a[href $= ".jpg"] img {
    transition: transform .4s;
  }
  a[href $= ".jpg"]:hover img {
    transform: scale(1.3);
    transform-origin: 50% 50%;
  }

  a[href $= ".jpg"] {
    display: flex;
    columns: 2;
    margin: 0 0;
    border-radius: 5px;
}