JSFiddle - React, Tailwind, and code Playground

by Dhanck

HTML

<div class="row">
    <div class="col-sm-6">
        <!-- normal -->
        <div class="ih-item circle effect13 from_left_and_right"><a href="#">
        <div class="img"><img src="https://scontent-fra3-1.xx.fbcdn.net/hphotos-xfp1/v/t1.0-9/10372354_10152225720294065_6421086775078424187_n.jpg?oh=d1d3e66e5b5dd8890c06ca31e2add340&oe=5612F195" alt="img">
            </div>
        <div class="info">
          <div class="info-back">
            <h3>Upload New</h3>
            <p>Use Default</p>
          </div>
        </div></a>

        </div>
        <!-- end normal -->
    </div>

CSS

.ih-item.circle {
    position: relative;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    overflow:hidden;
}
.ih-item, .ih-item * {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.ih-item.circle .img img {
    border-radius: 50%;
}
.ih-item img {
    width: 200px;
    height: 200px;
    overflow:hidden;
}
.ih-item, .ih-item * {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
img {
  vertical-align: middle;
}
img {
  border: 0;
}
.ih-item a {
  color: #333;
}
.ih-item.circle.effect13 .info {
  background: #333333;
  background: rgba(0, 0, 0, 0.6);
  opacity: 0;
  pointer-events: none;
  -webkit-transition: all 0.35s ease-in-out;
  -moz-transition: all 0.35s ease-in-out;
  transition: all 0.35s ease-in-out;
    font-family:'Century Gothic';
}
.ih-item.circle .info {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  text-align: center;
  border-radius: 50%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}


.ih-item.circle .img:before {
  position: absolute;
  display: block;
  content: '';
  width: 100%;
  height: 100%;
  border-radius: 50%;
  box-shadow: inset 0 0 0 16px rgba(255, 255, 255, 0.6), 0 1px 2px rgba(0, 0, 0, 0.3);
  -webkit-transition: all 0.35s ease-in-out;
  -moz-transition: all 0.35s ease-in-out;
  transition: all 0.35s ease-in-out;
}
:before, :after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}






.ih-item.circle.effect13.colored .info {
    background: #1a4a72;
    background: rgba(26, 74, 114, 0.6);
}
.ih-item.circle.effect13 .info {
    background: #333333;
    background: rgba(0, 0, 0, 0.6);
    opacity: 0;
    pointer-events: none;
    -webkit-transition: all 0.35s ease-in-out;
    -moz-transition: all 0.35s ease-in-out;
    transition:...