CIRCLE HOVER EFFECT
Hey! Traigo un tuto muy lino y espero que les ayude
Ok aqui pueden ver como es:
Ok empecemos:
Coloquen el codigo antes de: </style>
.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;
}
.ch-item {
width: 100%;
height: 100%;
border-radius: 50%;
position: relative;
cursor: default;
box-shadow:
inset 0 0 0 16px rgba(255,255,255,0.6),
0 1px 2px rgba(0,0,0,0.1);
-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;
}
.ch-img{
background-image: url(http://25.media.tumblr.com/tumblr_m7qa9yxlUR1r5ei3ho1_500.jpg);
background-position:50% 50%;
background-size:500px;
}
.ch-info {
position: absolute;
background: url(http://25.media.tumblr.com/tumblr_lyjn8soO2W1ro1s33o1_500.jpg) D9E8FC;background-position:50% 50%;
width: inherit;
height: inherit;
border-radius: 50%;
opacity: 0;
-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-transform: scale(0);
-moz-transform: scale(0);
-o-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
-webkit-backface-visibility: hidden;
}
.ch-item:hover {
box-shadow:
inset 0 0 0 1px rgba(255,255,255,0.1),
0 1px 2px rgba(0,0,0,0.1);
}
.ch-item:hover .ch-info {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-o-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
opacity: 1;
}
.ch-item:hover .ch-info p {
opacity: 1;
}
-C-Box Version:
<ul class="ch-grid">
<li> <div class="ch-item ch-img">
<div class="ch-info">
<center>
<div style="margin-top:80px; width:270px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdIqr5B03NYoJJT9j_eMADcJNTspIc54SENwUeTanitw0i1jFW5HoGz79H_ngBFcNY16G73w7PyOUHasDoTLKK3hCXaD-i6Mji2pNHZ81Re9dfN98UFmRRo5X2jP8BQ1tTOVzTPm1pfIOI/s1600/bodybg.gif); border-radius:10px;">
<br/>
cbox codes
</div>
</center>
</div>
</div>
</li>
</ul>
Version Normal:
<ul class="ch-grid"><li><div class="ch-item ch-img"><div class="ch-info"><center><div style="margin-top:80px; width:270px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdIqr5B03NYoJJT9j_eMADcJNTspIc54SENwUeTanitw0i1jFW5HoGz79H_ngBFcNY16G73w7PyOUHasDoTLKK3hCXaD-i6Mji2pNHZ81Re9dfN98UFmRRo5X2jP8BQ1tTOVzTPm1pfIOI/s1600/bodybg.gif); border-radius:10px;text-align:left;padding:5px;">anything here <br/></div></center></div></div></li></ul>
Eso es todo. Espero y les sirva
Comentarios
Publicar un comentario
Genial! Vas a dejarme un comentario?
Recuerda...
-No ulsultos
-No spam
-Puedes hacer pedidos amablemente.
-Si ves algo tuyo avisamelo de buena forma.
Eso es todo >w< gracias por dejarme un comentario, me hacen la personita mas feliz de la tierra❤
Caritas:
(。◕‿◕。)(◕_◕)(◕‿◕)\(◕ ◡ ◕\)Σ ◕ ◡ ◕(◕︵◕)(´◕ฺω◕ฺ`)(◕ฺ∀◕ฺ)✿◕‿◕✿ ❀◕‿◕❀ ❁◕‿◕❁✾◕‿◕✾ (°∀°)(• ε •)(●´ω`●)
Ծ_Ծஇ_இอ_อ อ้_อ้ ๏_๏๏̯͡๏ •▱• ↁ_ↁ ⇎_⇎≧ヮ≦ ⊙ω⊙ ⊙▂⊙ ⊙△⊙ ⊙︿⊙ ʘ‿ʘ ⊙﹏⊙ ⊙0⊙╰☆╮□_□ ◉_◉ ◉△◉ ○_○ ◔_◔ ◔ᴗ◔ ◕◡◕◪_◪ ◮_◮☆¸☆☻_☻♥◡♥句_句(゜Д゜)☜(⌒▽⌒)☞ (☞゚ヮ゚)☞ ☜(゚ヮ゚☜)^ㅂ^ ヽ(o`皿′o)ノ (≧ロ≦) (ΘεΘ;)