JSFiddle - React, Tailwind, and code Playground

HTML

<body>
  <div class="container">
    <img 
       src="https://www.google.de/logos/doodles/2014/european-parliament-election-2014-day-4-5483168891142144-hp.jpg" 
       />
    <!-- 366x200 -->
  </div>
</body>

CSS

.container {
  width: 100px;
  height: 30px;
  border: 1px solid black;
  overflow:hidden;
  position:relative;
  transititon: width 5s, height 8s;
}
.container img {
  position: absolute;
  left:-10000%; right: -10000%; 
  top: -10000%; bottom: -10000%;
  margin: auto auto;
  min-width: 1000%;
  min-height: 1000%;
  -webkit-transform:scale(0.1);
  transform: scale(0.1);
}
.container:hover {
  width: 800px;
  height: 800px;
  transition: width 5s, height 8s;
}