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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjW0MB4pr62Al3NLBonngvSgFrZrrNFb119HLh4vmDfvuUyme0cPnh-GQryjFe99bbhLbUzdgG8LkyBa4MeEfcJq0m8gRImOcGEjw4CNc-xKuXekSMWgloMQM_en0I_CV96GvakyViy_to/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!!!