Imagem Hover usando Webkit e CSS

Bom galera trago a vocês nosso primeiro jogo sendo postado aqui na Scaler com Javascript e HTML5
Vamos começar adicionando o css

Demonstração

procure por ]]></b:skin>   adicone o código abaixo, acima dela;

/* Efeitos */
 .efeitobox{
  float:left;
  margin:5px;
  width:170px;
  height:230px;
  border:2px solid #555;
  overflow:hidden;
 }
 .details{
  width:170px;
  height:230px;
                font-family: Arial;
  background:#000;
  color:#fff;
                font-size: 11px;
  text-align:left;
 }
 #efeito-1 img {
  -webkit-transform: scale(1);
  -webkit-transition-timing-function: ease-out;
  -webkit-transition-duration: 500ms;
 }
 #efeito-1 img:hover{
  -webkit-transform: scale(.5);
  -webkit-transition-timing-function: ease-out;
  -webkit-transition-duration: 500ms; 
 }
 
 #efeito-2 img {
  opacity: 1;
  -webkit-transition: opacity;
  -webkit-transition-timing-function: ease-out;
  -webkit-transition-duration: 500ms;
 }
 #efeito-2 img:hover{
  opacity: .5;
  -webkit-transition: opacity;
  -webkit-transition-timing-function: ease-out;
  -webkit-transition-duration: 500ms; 
 }
 
 #efeito-3{position:relative;}
 #efeito-3 img{
  opacity:1
  -webkit-transition: opacity;
  -webkit-transition-timing-function: ease-out;
  -webkit-transition-duration: 500ms;
 }
 #efeito-3 .details{
  position:absolute;
  top:0;
  left:0;
  opacity: 0;
  -webkit-transition: opacity;
  -webkit-transition-timing-function: ease-out;
  -webkit-transition-duration: 500ms;
 }
 
 #efeito-3 .details:hover{
  opacity: .9;
  -webkit-transition: opacity;
  -webkit-transition-timing-function: ease-out;
  -webkit-transition-duration: 500ms;
 }
 
 #efeito-4{position:relative;}
 #efeito-4 img{
  position:absolute;
  top:0;
  left:0;  
  -webkit-transition: margin-left;
  -webkit-transition-timing-function: ease-in;
  -webkit-transition-duration: 250ms;
 }
 #efeito-4:hover img{
  margin-left:200px;
 }
 #efeito-4 .details{
  position:absolute;
  top:0;
  left:0;
  z-index:-1;
 }
 
 #efeito-5{position:relative;}
 #efeito-5 .details{
  opacity: .9;
  position:absolute;
  top:0;
  left:0;
  margin-left:-200px;  
  -webkit-transition: margin-left;
  -webkit-transition-timing-function: ease-in;
  -webkit-transition-duration: 250ms;
 }
 #efeito-5:hover .details{
  margin-left:0;
 }
 #efeito-5 img{
  position:absolute;
  top:0;
  left:0;
  z-index:0;
 }
 #efeito-6{
  position:relative;
 }
 #efeito-6 img{
  position:absolute;
  top:0;
  left:0;
  z-index:0;
 }
 #efeito-6 .details{
  opacity: .9;
  position:absolute;
  top:100;
  left:150;
  z-index:999;
  -webkit-transform: scale(0);
  -webkit-transition-timing-function: ease-out;
  -webkit-transition-duration: 250ms;
 }
 #efeito-6:hover .details{
  -webkit-transform: scale(1);
  -webkit-transition-timing-function: ease-out;
  -webkit-transition-duration: 250ms; 
 }

a.classe2:link, a.classe2:visited {
text-decoration: none
font-family: Arial;
font-size: 11px;
color: #fff;
}
a.classe2:hover {
text-decoration: underline;
font-size: 11px;
font-family: Arial;
color: #fff;
}

Agora ao html adicione o código abaixo ao gadget html/Javascript ou na postagem só você escolher o efeito e ir substituindo onde tem que substituir ^^

<!-- Efeito 1 -->
 <div id="efeito-1" class="efeitobox">
  <img height="ALTURA DA IMAGEM" width="LARGURA DA IMAGEM"src="LINK DA IMAGEM"/>
 </div>

 <!-- Efeito 2 -->
 <div id="efeito-2" class="efeitobox">
  <img height="ALTURA DA IMAGEM" width="LARGURA DA IMAGEM" src="LINK DA IMAGEM"/>
 </div>

 <!-- Efeito 3 -->
 <div id="efeito-3" class="efeitobox">
  <img height="ALTURA DA IMAGEM" width="LARGURA DA IMAGEM" src="LINK DA IMAGEM"/>
  <div class="details">
   <h2>TITULO</h2>
   <p>TEXTO<br/>
<a class="classe2" href="LINK DO LEIA MAIS">Leia mais...</a></p>   
  </div>
 </div>

 <!-- Efeito 4 -->
 <div id="efeito-4" class="efeitobox">
  <img height="ALTURA DA IMAGEM" width="LARGURA DA IMAGEM" src="LINK DA IMAGEM"/>
  <div class="details">
   <h2>TITULO</h2>
   <p><b>TEXTO<br/>
<a class="classe2" href="LINK DO LEIA MAIS">Leia mais...</a></p>   
  </div>
 </div>

 <!-- Efeito 5 -->
 <div id="efeito-5" class="efeitobox">
  <img height="ALTURA DA IMAGEM" width="LARGURA DA IMAGEMpx" src="LINK DA IMAGEM"/>
  <div class="details">
   <h2>TITULO</h2>
   <p><b>TEXTO<br/>
<a class="classe2" href="LINK DO LEIA MAIS">Leia mais...</a></p>   
  </div>
 </div>

 <!-- Efeito 6 -->
 <div id="efeito-6" class="efeitobox">
  <img  height="ALTURA DA IMAGEM" width="LARGURA DA IMAGEM"  src="LINK DA IMAGEM"/>
  <div class="details">
   <h2>TITULO</h2>
   <p><b>TEXTO<br/>
<a class="classe2" href="LINK DO LEIA MAIS">Leia mais...</a>
<br/></p>   
  </div>
 </div>

Entendo o Código
para você alterar o tamanho da imagem e descrição procure por

 .efeitobox{
  float:left;
  margin:5px;
  width:170px;
  height:230px;
  border:2px solid #555;
  overflow:hidden;
 }
 .details{
  width:170px;
  height:230px;
                font-family: Arial;
  background:#000;
  color:#fff;
                font-size: 11px;
  text-align:left;
 }

e coloque no mesmo tamanho o width e height do efeitobox e details não esqueça de colocar o mesmo tamanho no html para a imagem se redimensionar automáticamente sem precisar mudar o tamanho no photoshop, photofiltre, etc.... o color do details é a cor da fonte se quiser mudar pode mudar o background é o fundo  , border 2px solid #555 é a cor da borda e o 2 px o tamanho da mesma ,margin:5px; é o tamanho da distancia que vai ter dentre as imagens, text-align:left é o lado que o texto vai ficar lembre-se left esquerda, right a direita e center no centro.
Bom é isso galera espero que este tutorial seja de grande utilidade a vocês e até a próxima ^^.