<style>.ch-grid {
padding: 0px;
list-style: outside none none;
display: block;
text-align: center;
width: 100%;
}
.ch-grid li {
width: 180px;
height: 180px;
display: inline-block;
}
.ch-img-2 {
background-image: url("http://www.fera.ir/wp-content/themes/Fera-Flat-Theme-Artabaz/images/logo-1.jpg");
}
.ch-item {
width: 100%;
height: 100%;
border-radius: 50%;
position: relative;
box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1);
cursor: default;
}
.ch-item:before {
content: "";
display: table;
}
.ch-info-wrap {
top: 20px;
left: 20px;
box-shadow: 0px 0px 0px 20px rgba(255, 255, 255, 0.2), 0px 0px 3px rgba(115, 114, 23, 0.8) inset;
}
.ch-info-wrap{
position: absolute;
width: 140px;
height: 140px;
border-radius: 50%;
}
.ch-info {
position: absolute;
width: 140px;
height: 140px;
border-radius: 50%;
}
.ch-info .ch-info-front {
transition: all 0.6s ease-in-out 0s;
}
.ch-info > div {
display: block;
position: absolute;
width: 100%;
height: 100%;
border-radius: 50%;
background-position: center center;
}
.ch-info .ch-info-back {
opacity: 0;
background: none repeat scroll 0% 0% #249856;
pointer-events: none;
transform: scale(1.5);
transition: all 0.4s ease-in-out 0.2s;
}
.ch-info h3 {
color: #FFF;
text-transform: uppercase;
font-size: 13px;
margin: 0px 15px;
padding: 25px 0px 0px;
font-family: "artabaz",Arial,sans-serif;
font-weight: normal !important;
text-shadow: 0px 0px 1px #FFF, 0px 1px 2px rgba(0, 0, 0, 0.3);
}
.ch-info h2 {
font-size: 60px;
margin: -33px 15px -18px;
padding: 10px 0px 0px;
font-family: "alimazloom",Arial,sans-serif;
color: #225E3B;
}
.ch-item:hover .ch-info-front {
-webkit-transform: scale(0);
-moz-transform: scale(0);
-o-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
opacity: 0;
}
.ch-item:hover .ch-info-back {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-o-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
opacity: 1;
pointer-events: auto;
}
</style>
<div style="float:right; margin:10px 10px 0;">
<ul class="ch-grid">
<li>
<div class="ch-item ch-img-2">
<div class="ch-info-wrap">
<div class="ch-info">
<div class="ch-info-front ch-img-2"></div>
<div class="ch-info-back">
<h3>دبیرستانی - کنکوری</h3>
<h2>فرا</h2>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
حمایت شده: