Eu vi recentemente um truque que chamou minha atenção e eu pensei que era uma maneira muito inteligente de mostrar mais detalhes sobre um elemento quando pasar o mouse sobre ele. Decidi experimentá-lo e a solução foi bastante simples.

HTML


As colunas são compostas de itens de lista não ordenada, dentro de cada item da lista é a imagem em miniatura e os detalhes do item embrulhado em uma classe de "info" .

  • Title</h2>

    Short Description</p> </div> </li> </ul>

CSS


Comece pelo estilo dos itens da lista. Observe que adicionamos position: relative; ao item de lista, e em foco levantamos a z-index para 99 para que ele levanta sobre os outros elementos.

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



Nós adicionar um position: relative; à imagem, bem como, para que possamos controlar o z-index valor em foco. O que queremos fazer aqui é para diminuir a opacidade da imagem, por padrão para 30%, em seguida, em foco, aumente a opacidade para 100% e levantar a imagem, aumentando o z-index valor para 999. Isso permitirá que o thumbnail passe para cima dos elementos .info .

/*--Thumbnail Styles--*/
ul.columns li img {
	position: relative;
	filter: alpha(opacity=30);
	opacity: 0.3;
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=30)"; /*--IE8 Specific--*/
}
ul.columns li:hover img{
	z-index: 999;
	filter: alpha(opacity=100);
	opacity: 1;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}
/*--Details Style--*/
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;}

Considerações Finais


Vá em frente e experimentar esta técnica! Se você tiver dúvidas ou preocupações, por favor, não hesite em me avise. Para aqueles preocupados com esta técnica trabalhando no IE6, você pode usar alguns truques jQuery para contornar o problema hover.

tutorial_popout.zip