Ante todo aclaro que este no es un tutorial creado por mi, sino que fue uno que vi en una web inglesa hace tiempo, me gusto y lo utilice, con el código que a continuación les voy a dejar, podrán hacer que las imágenes muestren cierta in formación al pasar el mouse sobre ellas.

Ante todo el código css:

Código:

/*---------- CSS FOTO INFO -----------*/

.wrap a {display:block; width:220px; height:330px; text-decoration:none; color:#000;}
.wrap {width:220px; height:330px; position:relative; overflow:hidden; font-family:arial, sans-serif; border:0; margin:0 10px; float:left; display:inline;}
.wrap img {border:0;}
.wrap i {display:block; width:220px; height:330px; position:absolute; left:0; top:300px; z-index:1; background:#000; filter: alpha(opacity=40);
 filter: progid:DXImageTransform.Microsoft.Alpha(opacity=40); opacity:0.40;
 -webkit-transition: all 0.6s ease-in-out;
 -moz-transition: all 0.6s ease-in-out;
 -o-transition: all 0.6s ease-in-out;
transition: all 0.6s ease-in-out;
 }
.wrap p {display:block; width:220px; height:330px; position:absolute; left:0; top:300px; z-index:1; background:transparent; font-size:12px; color:#fff; padding:0; margin:0; line-height:16px;
-webkit-transition: all 0.6s ease-in-out;
-moz-transition: all 0.6s ease-in-out;
-o-transition: all 0.6s ease-in-out;
transition: all 0.6s ease-in-out;
}
.wrap p b {display:block; font-size:22px; color:#fc0; text-align:center; margin:0; padding:0; line-height:30px;}
.wrap p span {display:block; padding:10px; line-height:20px;}
 
.wrap a:hover {direction:ltr;}
.wrap a:hover i {top:0;}
.wrap a:hover p {top:0;}
 
.clear {clear:left;}


Ahora el código que va colocado dentro de un widget y que podrán editar a su gusto:

Código:

<div id="info">
<h2>CSS3 Photo-Info</h2>
<h3>09 de julio del 2011.</h3>
 
 <div class="wrap">
<a href="#x">
   <img src='http://img41.xooimage.com/files/1/1/8/frog-20d8828.jpg' alt='' />
   <i></i>
   <p>
      <b>Red Eye Frog</b>
      <span>Red-eyed tree frogs, as their name states, have bold red eyes with vertically narrowed pupils, a vibrant green body with yellow and blue striped sides, and orange toes. There is a great deal of regional variation in flank and thigh coloration.

 
      Although it has been suggested that A. callidryas' bright colors function as aposematic or sexual signals, neither of these hypotheses have been confirmed.</span>
   </p>
</a>
</div> <!-- end wrap -->
 <div class="wrap">
<a href="#x">
   <img src='http://img49.xooimage.com/files/6/7/0/emperor-20d880c.jpg' alt='' />
   <i></i>
   <p>
      <b>Emperor Penguin</b>
      <span>The Emperor Penguin (Aptenodytes forsteri) is the tallest and heaviest of all living penguin species and is endemic to Antarctica.

 
      The male and female are similar in plumage and size, reaching 122 cm (48 in) in height and weighing anywhere from 22.37 kg (48.82 lb). The dorsal parts are black and sharply delineated from the white belly, pale-yellow breast and bright-yellow ear patches.
      </span>
   </p>
</a>
</div> <!-- end wrap -->
 <div class="wrap">
<a href="#x">
   <img src='http://img47.xooimage.com/files/9/0/2/pelican-20d8836.jpg' alt='' />
   <i></i>
   <p>
      <b>Pelicans</b>
      <span>A pelican is a large water bird with a distinctive pouch under the beak, belonging to the bird family Pelecanidae.

 
      Along with the darters, cormorants, gannets, boobies, frigatebirds, and tropicbirds, pelicans make up the order Pelecaniformes. Modern pelicans are found on all continents except Antarctica.
      </span>
   </p>
</a>
</div>
<br class="clear" />
 
<p class="info">stu nicholls - cssplay.co.uk</p>

 
 
</div>

Espero este pequeño tutorial le sea de utilidad a alguien, saludos y suerte!

Con su permiso les dejo aqui este enlace a un foro de pruebas donde esta el mencionado ejemplo para que puedan ver como queda: Click aqui.

gracias por el aporte, una vista previa no vendría mal

Gracias por el aporte amigo

Juan_fer escribió:gracias por el aporte, una vista previa no vendría mal

Tienes toda la razon, acabo colgar un enlace a un foro de prueba donde esta el ejemplo.

Genial ya los vi