JSFiddle - React, Tailwind, and code Playground

by Alex Slepenkov

HTML

<div class="image">
  <div class="shadow"></div>
  <div class="triangle"></div>
</div>

CSS

.image {
  background: url(http://justpics.ru/images/32/2/12741.jpg) no-repeat center center;
  position: relative;
  width: 400px;
  height: 300px;
}

.image:hover .shadow {
  background: rgba(0, 0, 0, 0.8)
}
.image:hover .triangle{
    display:block;
}

.shadow {
  width: 100%;
  height: 100%;
}

.triangle {
  display:none;
  border: 20px solid transparent;    
border-left: 20px solid red;
position:absolute;
top:42%;
left:47%;
}