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>
URL DE IMAGEN:Url de la imagen que quieres
#f9f9f9: Color del fondo que cambia
#F0ECE6:Color de fondo que cambia
 Y listo ,espero que les haya gustado ,hasta mañana♥


4 comentarios :

Hola :3 Bienvenidos a Lunany-kawaii
Debera seguir las siguientes reglas:
-No insultos
-No spam
-Ni peleas
gracias ♥