Anúncio Gráfico com CSS3 - Sensível ao Toque

Nesta postagem compartilho com vocês este 

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

Para colocar em seu blog... é bem simples

Entre em "layout" - "Adicionar um Gadget" - "HTML/JavaScript" e cole o seguinte código

<style>
.DicasHotCSSX {width: 300px;height:250px;margin:0px;float: left;overflow:hidden;position:relative;text-align:center;cursor:default;}
.DicasHotCSSX .DicasHotTexto,.DicasHotCSSX .content {width: 300px;height: 250px;position:absolute;overflow: hidden;top:0;left:0;}
.DicasHotCSSX img { display: block;position: relative;}
.DicasHotCSSX h2 {text-transform:uppercase;color:#fff;text-align:center;position:relative;font-size:28px;padding: 10px;background:rgba(255, 0, 0, 0.5);margin: 20px 0 0 0;font-family:PT Sans Narrow;}
.DicasHotCSSX p {font-family:PT Sans Narrow;font-size: 17px;position:relative;color:#fff;padding: 0 20px 0 20px;text-align: center;line-height:20px;}
.DicasHotCSSX a.informasi {display:inline-block;text-decoration:none;padding: 7px 14px;color:#fff;text-transform:uppercase;box-shadow: 0 0 1px #000;font-family: "PT Sans Narrow", Courier, monospace;background-color:#2788C2;border-radius:6px;}
.DicasHotCSSX a.info: hover {box-shadow: 0 0 5px #000;}
.PluginHot img {transition: all 0.2s linear;}
.PluginHot .DicasHotTexto {opacity: 0;background-color: rgba(0,0,0, 0.7);transition: all 0.3s ease-in-out;}
.PluginHot h2 {transform: translateY(-100px);opacity: 0;transition: all 0.3s ease-in-out;}
.PluginHot p {transform: translateY(100px);opacity: 0;transition: all 0.3s linear;}
.PluginHot:hover img {transform: scale(1.1,1.1);}
.PluginHot a.informasi {opacity:0;transition: all 0.3s ease-in-out;}
.PluginHot:hover .DicasHotTexto {opacity:1;}
.PluginHot:hover h2, .PluginHot:hover p, .PluginHot:hover a.informasi {opacity: 1;transform: translateY(0px);}
.PluginHot:hover p {transition-delay: 0.2s;}
.PluginHot:hover a.informasi { transition-delay: 0.2s;}
</style>
<link href='http://fonts.googleapis.com/css?family=PT+Sans+Narrow' rel='stylesheet' type='text/css'/>
<div class="DicasHotCSSX PluginHot">
<img alt="Iklan" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcGSLx0nAhH32AKoWT8oMrMiPYTmGimGvK7OqQ80Use66DuJ7q-8ANvQq0mu2JF7ujSsTGGR5SuBwBPInqJOeh3_J77AfDDJq_z6chBnLPkDRbJC3CyvyvdU-g2FQR1-v8wpa4fP2cC28U/s1600/Garota_linda_pose07.jpg" title="Iklan"/>
<div class="DicasHotTexto">
<h2>DicasHot #Compartilhe</h2>
<p>Aqui vem uma breve descrição do que você quer anunciar de fato aos seus visitantes...</p>
<a href="http://dicashot.blogspot.com/" class="informasi" target="_blank" rel="nofollow">Leia Mais</a>
</div>
</div>

Tendo colado o código, faça as modificações nas partes destacadas de azul no código, tendo feito isto, está pronto!!!