Lunany-kawaii: Tutorial:Imagen Efecto de circulo ♥

Hola de nuevo,antes de irme les dejo este otro efecto a las imagenes

y que aparesca un texto dentro de ella ,asi como la de aqui abajo

si les gusta aqui el codigo ,lo pueden poner en añadir un gadget o en una entrada

Aqui el contenido

<style>.ch-item {
width: 100%;
height: 100%;
border-radius: 50%;
position: relative;
box-shadow: 0 1px 2px rgba(0,0,0,0.1);
cursor: default;
}

.ch-info-wrap,
.ch-info{
position: absolute;
width: 280px;
height: 280px;
border-radius: 50%;

-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;

-webkit-perspective: 800px;
-moz-perspective: 800px;
-o-perspective: 800px;
-ms-perspective: 800px;
perspective: 800px;
}

.ch-info-wrap {
top: 20px;
left: 20px;
background: #f9f9f9 url(../images/bg.jpg);
box-shadow:
0 0 0 20px rgba(255,255,255,0.2),
inset 0 0 3px rgba(115,114, 23, 0.8);

}

.ch-info {
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transform-style: preserve-3d;
}

.ch-info > div {
display: block;
position: absolute;
width: 100%;
height: 100%;
border-radius: 50%;
background-position: center center;
-webkit-transition: all 0.6s ease-in-out;
-moz-transition: all 0.6s ease-in-out;
-o-transition: all 0.6s ease-in-out;
-ms-transition: all 0.6s ease-in-out;
transition: all 0.6s ease-in-out;
}

.ch-info .ch-info-front {
-webkit-transform-origin: 50% 100%;
-moz-transform-origin: 50% 100%;
-o-transform-origin: 50% 100%;
-ms-transform-origin: 50% 100%;
transform-origin: 50% 100%;

z-index: 100;
box-shadow:
inset 2px 1px 4px rgba(0,0,0,0.1);
}

.ch-info .ch-info-back {
background: rgba(230,132,107,0);
}

.ch-img-1 {
background-image: url(URL DE IMAGEN);
}

.ch-item:hover .ch-info-front {
-webkit-transform: rotate3d(1,0,0,-180deg);
-moz-transform: rotate3d(1,0,0,-180deg);
-o-transform: rotate3d(1,0,0,-180deg);
-ms-transform: rotate3d(1,0,0,-180deg);
transform: rotate3d(1,0,0,-180deg);

box-shadow:
inset 0 0 5px rgba(255,255,255,0.2),
inset 0 0 3px rgba(0,0,0,0.3);
}

.ch-item:hover .ch-info-back {
background:#F0ECE6;
}

.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: 320px;
height: 320px;
display: inline-block;
margin: 20px;
}

</style>

<ul class="ch-grid">
<li><div class="ch-item ch-img-1">
<div class="ch-info-wrap">
<div class="ch-info">
<div class="ch-info-front ch-img-1">
</div>
<div class="ch-info-back">
Aqui tu texto
</div>
</div>
</div>
</div>
</li>
</ul>