JSFiddle - React, Tailwind, and code Playground

HTML

<div class="dfi wr">
<a href="#" title="">
<img src="https://images.wallpaperscraft.com/image/forest_cat_cat_aggression_sitting_102923_1152x864.jpg">
<i class="icon-ope"></i></a>
<a href="#" title="">
<img src="https://images.wallpaperscraft.com/image/forest_cat_cat_aggression_sitting_102923_1152x864.jpg">
<i class="icon-ope"></i></a>
<a href="#" title="">
<img src="https://images.wallpaperscraft.com/image/forest_cat_cat_aggression_sitting_102923_1152x864.jpg">
<i class="icon-ope"></i></a>
<a href="#" title="">
<img src="https://images.wallpaperscraft.com/image/forest_cat_cat_aggression_sitting_102923_1152x864.jpg">
<i class="icon-ope"></i></a>
<a href="#" title="">
<img src="https://images.wallpaperscraft.com/image/forest_cat_cat_aggression_sitting_102923_1152x864.jpg">
<i class="icon-ope"></i></a>
<a href="#" title="">
<img src="https://images.wallpaperscraft.com/image/forest_cat_cat_aggression_sitting_102923_1152x864.jpg">
<i class="icon-ope"></i></a>
</div>

CSS

.dfi{
  width: 600px;
  padding: 70px;
  margin: 0 0 -10px -10px;
}
.dfi a:hover img {
  -webkit-transition:opacity 200ms linear 0ms;
  transition: opacity 200ms linear 0ms;
  opacity:0.5;
  -moz-opacity:0.5;
  filter:alpha(opacity=50);
}
.dfi a{
    -webkit-box-flex: 0;
    -ms-flex: 0 0 calc(50% - 10px);
    flex: 0 0 calc(50% - 10px);
    margin: 0 0 10px 10px;
      position: relative;
}
.dfi img {
  width: 100%;
  border: 1px solid rgba(62, 63, 56, 0.5);
}

.dfi{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.wr{
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

.icon-ope:before {
  content: "\e913";
  font-size:20px;
  background: rgba(255, 255, 255, 0.4);
  color: #000;
  padding: 8px;
  width: 24px;
height: 24px;
position: absolute;
border-radius: 90px;
z-index: 9000;
text-align: center;
top: 50%;
left: 50%;
margin: -16px 0 0 -16px;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.7);
}
.icon-ope:hover:before {
  background: #EA8430;
  color: #fff;
}