JSFiddle - React, Tailwind, and code Playground

by apoucoz

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 href="#">
<div class="spinner"></div>
<div class="img"><img alt="img" src=
"https://0.s3.envato.com/files/111269376/img/f4.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>
<br>
<h3 class="section-heading first-child" id="circle2">Hover effect 2</h3>
<div class="example"><!-- Left to right-->
<div class="row">
<div class="row-2"><!-- normal -->
<div class="item-hover circle effect2 left_to_right"><a href="#">
<div class="img"><img alt="img"...

CSS

.row-2 {
display: inline-block;
width: 49%;
margin-top: 20px;
margin-bottom: 20px;
text-align: center;
}