Tendencias na web e novas tecnologias

Existem algumas maneiras de criar efeitos de animação simples usando apenas o CSS. Vamos mostrar como criar um desses efeitos que pode vir a se tornar algo muito útil em seu dia a dia, uma vez que várias pessoas recorrem a outras técnicas que carregam um pouco mais o seu site.

Então, mãos à obra.

Estrutura do HTML

Primeiro vamos criar uma estrutura simples de HTML.

<div class="rollover-effect">
    <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed
    condimentum. In volutpat. Vestibulum elit. Aenean eget enim vitae
    tellus bibendum pellentesque. Sed at est. Example Text, Lorem ipsum
    dolor sit amet, consectetur adipiscing elit.</span></div>

Estrutura do CSS

Agora criamos o CSS para esse código.

	*{
    padding:0; margin:0;
    }
	body{
    font:100% normal Arial, Helvetica, sans-serif;
    }

	.rollover-effect {
    width: 280px;
    height: 150px;
    background-image: url(land.jpg);
    background-position: top;
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    border:10px solid #ccc;
    font:13px normal Arial, Helvetica, sans-serif;
    line-height:18px;
    float:left;
    margin:0 10px 10px 0;
    }

	.rollover-effect a {
    color: #fff;
    width: 280px;
    height: 150px;
    display: block;
    text-decoration: none;
    }

	.rollover-effect a:hover {
    background:#000;
    opacity:.60;
    filter:alpha(opacity=60);
    }

	.rollover-effect a span {
    display: none;
    width: 280px;
    padding:5px;
    }

	.rollover-effect a:hover span {
    display: block;
    }

Pronto. Basta aplicar isso onde você tiver necessidade e você terá um efeito legal, leve e simples de ser feito.

Para conferir um exemplo de como ficará esse efeito, veja a Demo.