JSFiddle - React, Tailwind, and code Playground

by Brad9aga

HTML

<div class="wrap">
  <img src="https://placeimg.com/800/600/any" alt="">
</div>

CSS

* {
  box-sizing: border-box;
}

body{
  background: #20262E;
}

.wrap {
  position: relative;
  width: fit-content;
  margin: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  outline:1px solid red;
  overflow: hidden;
}


.wrap:after {
  box-sizing: border-box;
  content: "";
  width: 80%;
  height: 90%;
  border-right: 2px solid #fff;
  border-left: 2px solid #fff;
  position: absolute;
  transform:scaleY(0);
  transform-origin: 0% 0%;
  transition: transform .2s linear;
}

.wrap:hover:after{
  transform:scaleY(1);
}


.wrap:before {
  box-sizing: border-box;
  content: "";
  width: 90%;
  height: 80%;
  border-top: 2px solid #fff;
  border-bottom: 2px solid #fff;
  position: absolute; 
  transform:scaleX(0);
  transform-origin: 0% 0%;
  transition: transform .2s linear;
  z-index: 1;
}

.wrap:hover:before{
  transform:scale(1);
}

.wrap img{
  transition: transform .2s linear;
  position:relative;
}

.wrap:hover img{
  transform:rotate(5deg);
}