Abaixo você pode ver uma imagem so efeito, mais para ver melhor por favor visite o DEMO (em ingles).

Agora vamos ver o código.

HTML

<div class='img' id='img-1'>
	<div class='mask'></div>
	<img src='image/01.jpg' />
</div>
<div class='img' id='img-2'>
	<div class='mask'></div>
	<img src='image/07.jpg' />
</div>
<div class='img' id='img-3'>
	<div class='mask' id='mask-1'></div>
	<div class='mask' id='mask-2'></div>
	<img src='image/05.jpg' />
</div>
<div class='img' id='img-4'>
	<div class='mask'></div>
	<img src='image/04.jpg' />
</div>
<div class='img' id='img-5'>
	<div class='mask'></div>
	<mg src='image/06.jpg' />
</div>
<div class='img' id='img-6'>
	<div class='mask'></div>
	<img src='image/08.jpg' />
</div>

CSS

.img{
	float:left;
	-webkit-transition-duration: 0.5s;
	}
.img img{
	padding:10px;
	border:1px solid #fff;
}
.img:hover{
	-webkit-transform:scale(0.8);
	-webkit-box-shadow:0px 0px 30px #ccc;
}
.img .mask{
	width: 100%;
	background-color: rgb(0, 0, 0);
	position: absolute;
	height: 100%;
	opacity:0.6;
	cursor:pointer;
	-webkit-transition-duration: 0.5s;
}
#img-1:hover .mask{
	height:0%;
}
#img-2:hover .mask{
	height:0%;
	margin-top:130px;
}
#img-3 #mask-1 {
	width:50%;
}
#img-3 #mask-2{
	width:50%;
	margin-left:211px;
}
#img-3:hover #mask-1{
	width:0%;
}
#img-3:hover #mask-2{
	margin-left:430px;
	width:0%;
}
#img-4:hover .mask{
	margin-left:219px;
	margin-top:135px;
	height:0%;
	width:0%;
}
#img-5:hover .mask{
	margin-left:219px;
	margin-top:135px;
	height:0%;
	width:0%;
	-webkit-transform: rotateX(360deg);
}
#img-6:hover .mask{
	margin-left:219px;
	margin-top:135px;
	height:0%;
	width:0%;
	-webkit-transform: rotateZ(750deg);
}

Para visualizar o original visite o DEMO (em ingles). Espero que vocês gostem dessas effects, não esqueça de deixar o seu comentário.

Aqui está a magia com apenas 4 linhas (3lines css, html 1line):

code

Se você quiser exibir uma dica de um link, basta adicionar o tooltip “classe” para o link e escrever seu Tooltip texto em uma tag span dentro da marca – que é ele.

Programa demonstrativo

Como editar CSS com o Firebug

Com o Firebug, dá pra editar CSS sem ser clicando nas propriedades.

É possível editá-lo como o HTML.

Vá na aba CSS, escolha o arquivo e clique em editar.

Vivendo e aprendendo.

PS: a WebDeveloper Toolbar faz a mesma coisa, aperte Ctrl+Shift+E.

PPS: Depois de editar, copie o código e cole no arquivo.

via pedromenezes.com

Ver Demo – Baixar – Mas Info CSS Hover Effect

Link  8 Javascript solutions to common CSS problems

Para realizar nosso teste, vamos utilizar a folha de estilo de Kabytes que atualmente tem um peso de 8.256KB

• Clean CSS : Muito fácil de utilizar simplesmente colamos o código ou lhe damos a url do mesmo.
• CSS Teak : Similar ao anterior, com uma utilidade de que podemos baixar um widgets para OSX. É muito prático já que uma vez que subimos o arquivo para otimizar o site  nos devolve o css otimizado pronto para baixar.
• flumpCakes : Mesma metodologia, não é tão pratico, quando gera o código otimizado temos que o copiar e colar no novo css de forma manual.
• Icey CSS Compressor : Extremamente rápido, tem o mesmo “problema” do anterior que não gera o arquivo, você tem que o copiar diretamente do html que o site gera.

Resultados:

Veerle mostra uma técnicas utilizando CSS que permite conseguir tabelas agradáveis e com estilo. Algo que será muito útil, se você precisa mostrar estatísticas ou dados nas suas webs.

1. A CSS styled table – Demo
2. A CSS styled table version 2 – Demo