JSFiddle - React, Tailwind, and code Playground

by Ben Watts

HTML

<div class="container">
<div class="grow">
  <img...

CSS

.container{
  border: 3px solid #000;
  height: 100px;
  width: 100px;
  overflow: hidden;
}

.grow img {
  height: 100%;
  width: 100%;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  transition: all 0.5s ease;
  
  -webkit-filter: grayscale(50%);
filter: grayscale(50%);
}

.grow img:hover {
  transition: width 0.5s height 0.5s;
  -moz-transition: width 0.5s height 0.5s;
  /* Firefox 4 */
  -webkit-transition: width 0.5s height 0.5s;
  /* Safari and Chrome */
  -o-transition: width 0.5s height 0.5s;
  /* Opera */
  -ms-transition: width 0.5s height 0.5s;
  /* IE9 (maybe) */
}

img:hover {
  width: 125px;
  height: 125px;
  -webkit-filter: grayscale(0%);
  filter: grayscale(0%);
}