Só 72 Bundas
Só 72 Bundas
(+18)
AS BARATINHAS #39
AS BARATINHAS #39...
...Conteúdo (+18)
arytrollando
Que isso jovem?? :)
(+18)
Buião
37 decotes que vão deixar a
sua semana melhor



Colocar Descrição Animada Com Efeito Hover Nas Imagens do Blogger


Nesta postagem compartilho com vocês este código muito útil quando você for colocar uma imagem em seu blog e quiser colocar nela uma legenda ou créditos. Enfim.


Veja uma demonstração do código:




DicasHot #Compartilhe



Torne-se membro do site, basta clicar no botão abaixo e clicar em Seguir:

Para colocar no Blogger

Entre em "Layout" - "Adicionar um Gadget" - "HTML/JavaScript" e cole o seguinte código:
<style>
#image-hover {
}

#figure {
position:relative;
float:left;
margin:10px;
overflow:hidden;
padding: 1px;
}

#figure:hover {
-moz-box-shadow:0 0 20px rgba(0,0,0,0.75);
-webkit-box-shadow:0 0 20px rgba(0,0,0,0.75);
box-shadow:0 0 20px rgba(0,0,0,0.75);
}

#figure .DicasHotHover {
position:absolute;
bottom:0;
left:0;
opacity: 0.75;
margin-bottom:-115px;
-webkit-transition: margin-bottom;
-webkit-transition-duration: 400ms;
-webkit-transition-timing-function: ease-out;
-moz-transition-property: margin-bottom;
-moz-transition-duration: 400ms;
-moz-transition-timing-function: ease-out;
-o-transition-property: margin-bottom;
-o-transition-duration: 400ms;
transition: margin-bottom;
transition-duration: 400ms;
transition-timing-function: ease-out;
}

#figure:hover .DicasHotHover {
margin-bottom:0px;
}

#image-hover .DicasHotHover {
width:100%;
height:90px;
padding:10px;
background:#B1D7F0;
color:#B1D7F0;
font-family: Arial, Helvetica, sans-serif;
}

#image-hover .DicasHotHover b {
text-shadow: 0px 2px 0px #B1D7F0;
}
#image-hover .DicasHotHover {
color: #000000;
line-height: 24px;
font-size: 14px;
text-shadow: 0px 2px 0px #000;
}
</style>
<div id="image-hover">
<div id="figure">
<a href="http://dicashot.blogspot.com/" target="_blank">
<img src="http://4.bp.blogspot.com/-rXdqyNjrWaU/TwYWDpQIayI/AAAAAAAAABE/Nid7WNUCCAQ/s1600/Blogger.png" height="200" width="197" /></a>
<span class="DicasHotHover">
<span style="font-family: Verdana, sans-serif;">DicasHot #Compartilhe</span>
</span></div>
</div>
Tendo colado o código, basta salvar e pronto!!!

Colocar Descrição Animada Com Efeito Hover Nas Imagens do Blogger Colocar Descrição Animada Com Efeito Hover Nas Imagens do Blogger Reviewed by Muca on 5/29/2014 12:11:00 PM Rating: 5

Como desenhar o Goku, naruto, boruto, etc | "Baixar curso"