JSFiddle - React, Tailwind, and code Playground

by Dmitriy Shvanyk

HTML

<div class="b-pict">
  <img src="http://placehold.it/150x150">
</div>
<div class="b-pict">
  <img src="http://placehold.it/250x150">
</div>
<div class="b-pict">
  <img src="http://placehold.it/350x250">
</div>

CSS

*{
  box-sizing: border-box;
}

.b-pict {
  display: inline-block;
  position: relative;  
}
.b-pict img {
  display: block;    
}
.b-pict:before,
.b-pict:after{
  content: '';
  width: 0;
  height: 0;
  opacity: 0;
  position: absolute;
  -webkit-transition: 0.5s;
  transition: 0.5s;
}
.b-pict:before{
   top: 0; left: 0;;  
  border-top: 4px solid rgba(0,0,0,.5);
  border-left: 4px solid rgba(0,0,0,.5);  
}
.b-pict:after{  
  bottom: 0; right: 0;;  
  border-bottom: 4px solid rgba(0,0,0,.5);
  border-right: 4px solid rgba(0,0,0,.5);  
}
.b-pict:hover:before,
.b-pict:hover:after{
  opacity: 1;
  width: calc(100% - 4px);
  height: calc(100% - 4px);
}
.b-pict:hover:after{  
  width: calc(100% - 8px);
  height: calc(100% - 8px);
}