CSS swap hover effect

Vocês provavelmente já devem conhecer esse efeito, o de o usuário ao passar o mouse sobre alguma imagem na página, é mostrada a descrição da mesma, com um efeito de “swap”, esse efeito é bem interessante para ser utilizado em sites do tipo e-commerce, e para conseguir esse tipo de efeito não é muito difícil, só vamos ter algum trabalho para adequar o efeito ao Internet Explorer 6, que não interpreta corretamente o efeito :hover.

Para chegar a esse efeito, cada bloco de imagem deverá conter a seguinte marcação HTML:

<a class="show" href="#" title="Livro Ajax com jQuery"><img src="images/livro-ajax-com-jquery.jpg" alt="Livro Ajax com jQuery" /></a>
<div class="hide">
    <a href="#">Livro Ajax com jQuery</a>
    <p>Requisições Ajax com a simplicidade da jQuery</p>
</div>

Como pode ver no código acima, a miniatura da imagem fica dentro de um link com a class=”show” e depois criamos mais uma div que irá conter a descrição da imagem. Elá será revelada somente quando o usuário passar o mouse sob o thumbnail da imagem. Para que você possar manipular melhor os elementos na página, aconselho você a utilizar listas desordenadas para conter essa marcação:

<ul id="work">
    <li>
    	<a class="show" href="#" title="Livro Ajax com jQuery"><img src="images/livro-ajax-com-jquery.jpg" alt="Livro Ajax com jQuery" /></a>
    	<div class="hide">
        	<a href="#">Livro Ajax com jQuery</a>
    		<p>Requisições Ajax com a simplicidade da jQuery</p>
        </div>
    </li>

    <li>
    	<a class="show" href="#" title="Livro Ajax com jQuery"><img src="images/livro-ajax-com-jquery.jpg" alt="Livro Ajax com jQuery" /></a>
    	<div class="hide">
        	<a href="#">Livro Ajax com jQuery</a>
    		<p>Requisições Ajax com a simplicidade da jQuery</p>
        </div>
    </li>

    <li>
    	<a class="show" href="#" title="Livro Ajax com jQuery"><img src="images/livro-ajax-com-jquery.jpg" alt="Livro Ajax com jQuery" /></a>
    	<div class="hide">
        	<a href="#">Livro Ajax com jQuery</a>
    		<p>Requisições Ajax com a simplicidade da jQuery</p>
        </div>
    </li>
</ul>

Com o HTML já definido, vamos partir para o CSS:

#work {
	list-style:none;
	margin:0;
	padding:0;
}
#work li {
	float:left;
	width:235px;
	margin:10px;
	display:inline;
	padding:3px;
	background:#fff;
	border:1px solid #cad789;
	height:154px;
}
#work li a {
	border:none;
}
#work p {
	margin-bottom:0;
}

O código é bem simples, basta definir float para todos os elementos da lista, definir também uma largura e altura para o box. O básico já está pronto, agora vamos criar os efeitos:

#work li .show{
	display:block;
	width:235px;
	height:154px;
}
#work li .hide {
	color:#d4df9d;
	text-align: left;
	height: 0;
	overflow: hidden;
	background-color:#687b00;
}

Como podem ver foram utilizados height:0 e overflow:hidden na class=”hide” para garantir que ela fique invisível ao usuário e somente os elementos com a class=”show” sejam revelados ao usuário com a utilização do seguinte código:

#work li:hover .hide{
	cursor: pointer;
	height: 133px;
	padding:10px;
	width:215px;
}
#work li:hover .show {
	height: 0;
	overflow: hidden;
}

Eu uso a pseudo-classe :hover para definir algumas propriedades para a class .hide toda vez que o usuário passar o mouse sobre os elementos de lista desordenada com o id work. Depois definimos a altura do .hide para 153px e após adicionamos height:0 e overflow:hidden para o elemento .show.

Vejam agora o exemplo em funcionamento, mas ele ainda não funciona no Internet Explorer 6 e anteriores.

Solução para o IE6

Para que esse exemplo funcione corretamente no IE6 teremos que utilizar de JavaScript para que ele interprete o :hover corretamente nos elementos, basta observar o código abaixo:

<!--[if lte IE 7]>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(function() {
	$("#work li").hover(function () {
		$(this).addClass("over");
	},function () {
		$(this).removeClass("over");
});
</script>
<![endif]-->

O Script acima irá adicionar a class=”over” a cada item da lista. É aconselhável você utilizar comentários condicionais para que o código seja somente lido pelo Internet Explorer 6 e anteriores. Não podemos esquecer também de adicionar ao CSS a marcação #work li.over .hide para que ela funcione semelhante a #work li:hover .hide. Basta efetuar a seguinte alteração no CSS:

#work li:hover .hide, #work li.over .hide{
	cursor: pointer;
	height: 133px;
	padding:10px;
	width:215px;
}
#work li:hover .show, #work li.over .show  {
	height: 0;
	overflow: hidden;
}

Vejam agora o exemplo final funcional no Internet Explorer 6. Esse post foi escrito com base no post original de Min Tran.

Isso pode lhe interessar:

• Menu estilo cardápio com CSS
• CSS Dropdown menu sem JavaScript ou hacks
• O que é o Acid Test?
• CSS inheritance – Aprenda a dominar herança no CSS
• Efeito cascata do CSS