Widget com imagem e resumo do post deslizando para Blogger

Olá amigos Mult-focos, trazemos neste post um widget com imagem e resumo do post deslizando. É você poderá destacar um post com um lindo widget onde a imagem deslizará ao passar o mouse, dando assim uma opção a mais seu visitante de leitura ao mesmo tempo que o prenderá em seu blog por mais tempo.
Veja a DEMO ao vivo clicando no botão abaixo.

DEMO
Vamos adicionar o  widget.

Vá ao painel do seu Blogger->Layout->Adicionar um gadget->HTML/javaScrit->Coloque nome no seu gadget->copie o código abaixo->faça as alterações devidas e cole em conteúdo->Salve, isto é tudo.

	<style>
	.image-box {
	width:280px;height:280px;overflow:hidden;background-color:white;
	border:1px solid #ccc;float:left;margin:1px 1px;
	font:normal normal 12px/1.4 Segoe,"Segoe UI",Arial,Sans-Serif;
	color:#333;
	}
	.image-container,
	.image-details {height:280px;border:5px solid white;background-color:#ffc;
	transition:margin-top .4s ease-out .4s;
	}
	.image-container img {
	width:280px;height:280px;padding:0 0;margin:0 0;border:none;outline:none;max-width:none;
	max-height:none;
	background-color:coral;
	}
	.image-details h4,
	.image-details p {
	margin:0 0 .2em;padding:0 0;height:70px;
	}
	.image-details h4 {
	font-size:120%;height:auto;
	}
	.image-details .details {
	padding:10px 12px;overflow:hidden;
	}
	.image-details .more {
	color:white;text-decoration:none;display:block;
	text-align:center;font-weight:bold;background-color:#124372;height:26px;line-height:26px;margin:10px 0 0;
	}
	.image-box:hover {border-color:#bbb; width:280px;
	height:280px;}
	.image-box:hover .image-container {margin-top:-160px}
	.image-details .more:hover {background-color:coral}
	</style>
	<div class="image-box-wrapper" id="image-box-wrapper">
	<div class="image-box">
	<div class="image-container">
	<img width="280" height="280" src="http://2.bp.blogspot.com/-FxX-JAfq7vw/U3i9OL3t4pI/AAAAAAAAFHk/WdA0rvveJXs/s320/minimum-wage.jpg" alt="Food" />
	</div>
	<div class="image-details">
	<div class="details">
	<h4>O maior salário mínimo do mundo</h4>
	<p>Quem pode pode, quem não pode bate palmas. Esta é a única solução para o reto do mundo...</p>
	<p><a class="more" href="http://www.mult-focos.blogspot.com.br/2014/05/o-maior-salario-minimo-do-mundo_18.html">Leia mais</a></p>
	</div>
	</div>
	</div>
	<div style="clear:both;"></div>
	</div>

view raw Para copiar clique em view raw WcirpdB hosted with ❤ by GitHub