<ul class="ch-grid">
<li>
<div class="ch-item">
<div class="ch-info">
<h3>Best Corset Ever</h3>
<p>by Jwebcat <a href="http://corsets.bz"> on Corsets.bz</a></p>
</div>
<div class="ch-thumb ch-img-1"></div>
</div>
</li>
</ul>
@import "compass/css3";
.ch-grid {
margin: 20px 0 0 0;
padding: 0;
list-style: none;
display: block;
text-align: center;
width: 100%;
}
.ch-grid:after,
.ch-item:before {
content: '';
display: table;
}
.ch-grid:after {
clear: both;
}
.ch-grid li {
width: 220px;
height: 220px;
display: inline-block;
margin: 20px;
}
.ch-item {
width: 100%;
height: 100%;
border-radius: 50%;
position: relative;
cursor: default;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}
.ch-thumb {
width: 100%;
height: 100%;
border-radius: 50%;
overflow: hidden;
position: absolute;
box-shadow: inset 0 0 0 15px rgba(255, 255, 255, 0.5);
transform-origin: 95% 40%;
transition: all 0.3s ease-in-out;
}
.ch-thumb:after {
content: '';
width: 8px;
height: 8px;
position: absolute;
border-radius: 50%;
top: 40%;
left: 95%;
margin: -4px 0 0 -4px;
background: radial-gradient(ellipse at center, #0e0e0e 0%, #7d7e7d 100%);
box-shadow: 0 0 1px rgba(255, 255, 255, 0.9);
}
.ch-img-1 {
background-image: url(http://corsets.bz/wp-content/uploads/et_temp/sm-strapless-25980-100939_193x322.jpg);
z-index: 12;
}
.ch-img-2 {
background-image: url(../images/8.jpg);
z-index: 11;
}
.ch-img-3 {
background-image: url(../images/9.jpg);
z-index: 10;
}
.ch-info {
position: absolute;
width: inherit;
height: inherit;
border-radius: 50%;
overflow: hidden;
background: #c9512e url(https://tympanus.net/Tutorials/CircleHoverEffects/images/noise.png);
box-shadow: inset 0 0 0 5px rgba(0, 0, 0, 0.05);
}
.ch-info h3 {
color: #fff;
text-transform: uppercase;
position: relative;
letter-spacing: 2px;
font-size: 18px;
margin: 0 60px;
padding: 22px 0 0 0;
height: 85px;
font-family: 'Open Sans', Arial, sans-serif;
text-shadow: 0 0 1px white, 0 1px 2px rgba(0, 0, 0, 0.3);
}
.ch-info p {
color: #fff;
padding: 10px 5px;
font-style: italic;
margin: 0 30px;
font-size: 12px;
border-top: 1px solid rgba(255, 255, 255, 0.5);
}
.ch-info p a {
display: block;
color: #333;
width: 75px;
height: 50px !important;
background: rgba(255, 255, 255, 0.3);
border-radius: 50px;
color: #fff;
font-style: normal;
font-weight: 700;
text-transform: uppercase;
font-size: 9px;
letter-spacing: 1px;
padding-top: 24px;
margin: 7px auto 0;
font-family: 'Open Sans', Arial, sans-serif;
opacity: 0;
transition: transform 0.3s ease-in-out 0.2s, opacity 0.3s ease-in-out 0.2s, background 0.2s linear 0s;
transform: translateX(60px) rotate(90deg);
}
.ch-info p a:hover {
background: rgba(255, 255, 255, 0.5);
}
.ch-item:hover .ch-thumb {
box-shadow: inset 0 0 0 15px rgba(255, 255, 255, 0.5), 0 1px 3px rgba(0, 0, 0, 0.2);
transform: rotate(-110deg);
}
.ch-item:hover .ch-info p a {
opacity: 1;
transform: translateX(0px) rotate(0deg);
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.