Sohtanaka recientemente ha descubierto un truco para realizar un sencillo efecto muy útil que hará que una determinada caja de contenido muestre más información al pasar el ratón por encima de ella. Es sencillo de construir, y totalmente gratis. A continuación os muestro el proceso, junto con un ejemplo y su descarga. Recordad que si tenéis alguna duda, sugerencia o problema podéis preguntarla en el foro.

Código HTML

Las columnas están realizadas en base a listas de items desordenados, entre cada item de la lista se encuentra la imagen de miniatura y los detalles para el item dentro de la lista, en la clase “info”.

<ul class="columns">
<li>

<div class="info">
<h2>Titulo</h2>
Descripcion corta
</div>
</li>
</ul>

Código CSS

Empieza a estilizar los items de la lista. Añadimos position: relative; a los items, y en hover elevamos el z-index a 99 para que se muestre por encima de otros elementos.

/*--Estilo de las columnas--*/
ul.columns {
	width: 960px;
	list-style: none;
	margin: 0 auto; padding: 0;
}
ul.columns li {
	width: 220px;
	float: left; display: inline;
	margin: 10px; padding: 0;
	position: relative;
}
ul.columns li:hover {z-index: 99;}

Gracias a que hemos añadido position: relative; a la imagen podremos controlar el valor de z-index en hover. Bajaremos la opacidad de la imagen por defecto a 30% y cuando se encuentre en estado hover subiremos esta opacidad al 100% y elevaremos el z-index a 999. Esto permitirá a la imagen permanecer por encima de los elementos (clase .info).

/*--Estilo de las miniaturas--*/
ul.columns li img {
	position: relative;
	filter: alpha(opacity=30);
	opacity: 0.3;
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=30)"; /*--Solo IE8--*/
}
ul.columns li:hover img{
	z-index: 999;
	filter: alpha(opacity=100);
	opacity: 1;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}

Usaremos posicionamiento absoluto para mover la clase .info -10 píxeles a la izquierda y -10 píxeles a la parte superior. Debido a que .info usa posicionamiento absoluto no tendremos padding superior así que el contenido no se posicionará por encima de la miniatura. Para hacer. CSS3 fue añadido para los bordes redondeados. .Info quedará oculto por defecto y se mostrará en hover.

/*--Estilo de los detalles--*/
ul.columns li .info {
	position: absolute;
	left: -10px; top: -10px;
	padding: 210px 10px 20px;
	width: 220px;
	display: none;
	background: #fff;
	font-size: 1.2em;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
}
ul.columns li:hover .info {display: block;}

ul.columns li h2 {
	font-size: 1.2em;
	font-weight: normal;
	text-transform: uppercase;
	margin: 0; padding: 10px 0;
}
ul.columns li p {padding: 0; margin: 0; font-size: 0.9em;}

Estandarización

CSS 2.1 inválido.

XHTML 1.0 Transitional válido.

Ejemplo y descarga