JSFiddle - React, Tailwind, and code Playground

by John Doe

HTML

<a href="#">
    <figure class="preview">
        <img src="//www.wallpaperlabel.com/static/images/Hd-Wallpaper-For-Widescreen.jpg">
    </figure>
</a>

CSS

.preview {
  float: left;
  overflow: hidden;
  margin: 0 27px 0 0;
  width: 122px;
  height: 140px;
  outline: 4px solid transparent;
  border: 4px solid #ccc;
  -webkit-transform: skew(-6deg);
  transform: skew(-6deg);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.preview:after {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 97, 50, 0.3);
  content: '';
  opacity: 0;
}
a:hover .preview:after {
  opacity: 1;
  z-index: 1;
}
img {
    max-width: 300px;
    margin-left: -90px;
    transform: skew(6deg);
}