Nachos, cheddar e duas ruivas gatas: está de volta o MasterChup (+18)
Nachos, cheddar e duas
ruivas gatas (+18)
AS BARATINHAS #39
AS BARATINHAS #39...
...Conteúdo (+18)
A vida de uma mulher peituda
A vida de uma mulher peituda
(+18)
Very good!!!!!
...


BOX - Método Homem Alpha

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


bandeiradois
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

FECHAR X
Links aleatórios: