JSFiddle - React, Tailwind, and code Playground

by Tan

HTML

<div class="photobox photobox_type17">
        <div class="photobox__previewbox">
          <img src="https://stas-melnikov.ru/cliparts/nature640x426.jpg" class="photobox__preview" alt="Preview" width="300px" height="180px">

        </div>
      </div>

CSS

.photobox{
  display: inline-block;
}

.photobox__previewbox{
  position: relative;
  overflow: hidden;
}

.photobox__previewbox:before{
  content: "";
}

.photobox_type17 .photobox__preview{
transition: all 0.5s;
-webkit-transition: all 0.5s; /* Safari */
transform: scale(1) translate(0, 0);
}

.photobox_type17:hover .photobox__preview{
  transform: scale(1.2) translate(4%, 4%);
}