JSFiddle - React, Tailwind, and code Playground

by Nico

HTML

<div class="wrapper">
  <div class="transistion">
    <a href="#">Link</a>
  </div>
</div>

CSS

.wrapper{
  width:200px;
  height:200px;
  border:1px solid Red;
 
}  

.transistion {
  width:180px;
  height:180px;
  margin:10px; 
  border: 1px solid Blue;
  background-image:url('https://www.homeandsmart.de/var/site/storage/images/_aliases/fixed_col_3/3/2/2/4/24223-2-ger-DE/philips-hue-starter-kit.jpg');
  background-size:100% 100%;
  background-position:center center;
  transition: all 650ms ease-out 0s;
}

.transistion:hover {
  background-size:110% 110%;
}