muy buenas! yo aqui denuevo mientras volvia de japones, no hay mucho que contar ya que estuve aqui desde hace un ratito entonces ps haha.
Bueno este efecto es No solo se puede usar como welcome, tambien puedes adaptarlo a tu manera claro dandome creditos.
Bueno si quieres ver el efecto click aqui { x }
Si te gusto el efecto debes colocar este codigo en donde quieras que este:
<style>
.imgbox{
height:200px;
width:280px;
font:13px calibri;
line-height:18px;
background:url(http://fc09.deviantart.net/fs70/i/2013/061/9/2/flower__d_wall_by_analaurasam-d5wrc5g.png);
background-repeat:no-repeat;
background-size:380px;
background-position:50% 50%;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
border:2px solid #666;
}
#contentbox{
width:50px;
height:50px;
padding:10px;
opacity:0;
background:#fff;
overflow:hidden;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
text-align:left;
}
#hoversign{
width:100px;
height:100px;
margin-left:0px;
background:#fff;
text-align:Center;
opacity:0.8;border-radius:50%;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
color:#999;}
.imgbox:hover #contentbox{
width:260px;
height:180px;
padding:10px;
overflow:hidden;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
opacity:0.9;
margin-top:-36px;
color:#000;}
.imgbox:hover #hoversign{
width:0px;height:0px;
opacity:0;}
</style>
<div class="imgbox"><center><br/><br/>
<div id="hoversign"><br/><br/>HOVER</div>
<div id="contentbox" >
Aqui puedes escribir lo que tu quieras
</div>
</div>
Buen tutoo! *O*
ResponderEliminarhaha muchas gracias, me alegra que te guste
Eliminar