Welcome efecto Hover

    
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 100% ccreado por mi, asi que 100% creditos a koran suite, la idea base comenzo con el efecto circle y con un pequeño editor de codigos logre este hermoso efecto el cual yo tambien quede facinada.
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>

2 comentarios:

- No de spam.
- No malas palabras.
- Respeta al administrador y a los usuarios del blog
- Deja tu hermosa firma
Aqui algunos Emoji que puedes usar:
(ノ◕ヮ◕)ノ*:・゚✧ (=ω=;) (◕‿-) (✿ ♥‿♥) (づ。◕‿‿◕。)づ (•⊙ω⊙•)