Efeito over Globo.com
Já tem um tempo que o Adalberto Pita (@adalbertopita) procura uma solução para fazer efeito over utilizado na Globo.com. Passe o mouse em cima de qualquer imagem e veja que o efeito é colocado por cima da imagem e não do lado como seria o padrão.
Para ter o mesmo efeito é simples:
HTML
<ul>
<li><img src=”“ alt=”“ />
<span class=”detalhe”>seu texto aqui</span>
</li>
</ul>
CSS
ul {margin:0; padding:0;}
ul li {list-style:none; position:relative; width:100px; height:100px;}
ul li span {position:absolute; display:block; top:0; left:0; opacity:0; width:90px; height:90px; transition:all 500ms ease-in; -webkit-transition:all 500ms ease-in; -moz-transition:all 500ms ease-in; -o-transition:all 500ms ease-in;border:5px solid #900}
ul li:hover span {cursor:pointer; opacity:0.9}
Visualize o efeito: http://jsfiddle.net/tcelestino/R3htT/1/
Para incrementar um pouco o efeito, adicionei o “transition” para criar um efeito “fade-in” e “fade-out”.
Solução rodando no Chrome, Firefox e Opera.
