JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="http://imapo.ru/css/ohover.css">
<div class="block_for_effect">
<h3 class="section-heading" id="circle1">Hover effect 1</h3>
<div class="example">
<div class="row">
<div class="row-2">
<!-- normal -->
<div class="item-hover circle effect1">
<a href="#">
<div class="spinner"></div>
<div class="img"><img alt="img" src="https://0.s3.envato.com/files/111269376/img/f1.jpg"></div>
<div class="info">
<div class="info-back">
<h3>Heading here</h3>
<p>Description goes here</p>
</div>
</div>
</a>
</div>
<!-- end normal -->
</div>
<div class="row-2">
<!-- colored -->
<div class="item-hover circle colored effect1">
<a href="#">
<div class="spinner"></div>
<div class="img"><img alt="img" src="https://0.s3.envato.com/files/111269376/img/f5.jpg"></div>
<div class="info">
<div class="info-back">
<h3>Heading here</h3>
<p>Description goes here</p>
</div>
</div>
</a>
</div>
<!-- end colored -->
</div>
</div>
<div class="row">
<div class="row-2">
<!-- normal -->
<div class="item-hover circle effect1 counterclockwise">
<a href="#">
<div class="spinner"></div>
<div class="img"><img alt="img" src="https://0.s3.envato.com/files/111269376/img/f3.jpg"></div>
<div class="info">
<div class="info-back">
<h3>Heading here</h3>
<p>Description goes here</p>
</div>
</div>
</a>
</div>
<!-- end normal -->
</div>
<div class="row-2">
<!-- colored -->
<div class="item-hover circle colored effect1 counterclockwise">
<a...
CSS
.row-2 {
display: inline-block;
width: 49%;
margin-top: 20px;
margin-bottom: 20px;
text-align: center;
}