EXEMPLO

PASSO 1: CRIANDO O HTML

Primeiramente vamos começar estruturando nosso html.

1. Vamos criar uma div que irá receber a ação do hover.
2. Dentro dessa div iremos acrescentar um elemento que ficará escondido para funcionar como retina.
3. Podemos acrescentar um ícone ou texto dentro do elemento retina para aparecer durante o hover

<div class="hoverzoom">
	<img src="https://www.turbosite.com.br/blog/wp-content/uploads/2014/09/exemplo-turbosite.jpg">
	<div class="retina">
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit, temporibus, repellat? Placeat nihil itaque culpa eu.</p>
		<a href="#">Saiba mais</a>
	</div>
</div>

Como disse, dentro do elemento .retina vocês podem adicionar o que acharem necessário.

PASSO 2: MONTANDO O CSS

Para criar esse efeito nós vamos precisar trabalhar com as propriedades transition e transform do CSS3.

Com essas 2 propriedades nós vamos adicionar a forma de transição do hover e modificar a escala da imagem.

Agora vamos ao CSS.

.hoverzoom {
	position: relative;
    width: 350px;
    overflow: hidden;
}
.hoverzoom > img {
   width: 100%; 
	border-radius: 2px;
	-webkit-transition: all .8s cubic-bezier(.190, 1.000, .220, 1.000);
	    -moz-transition: all .8s cubic-bezier(.190, 1.000, .220, 1.000);
	     -ms-transition: all .8s cubic-bezier(.190, 1.000, .220, 1.000);
	      -o-transition: all .8s cubic-bezier(.190, 1.000, .220, 1.000);
	         transition: all .8s cubic-bezier(.190, 1.000, .220, 1.000);
}
.hoverzoom:hover > img {
	-webkit-transform: scale(1.5);
	   -moz-transform: scale(1.5);
	    -ms-transform: scale(1.5);
	     -o-transform: scale(1.5);
	        transform: scale(1.5);
}
.hoverzoom .retina{
	position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    opacity: 0;    
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0.5);    
    border-radius: 2px;
    text-align: center;
    padding: 30px;

    -webkit-transition:	 all .8s cubic-bezier(.190, 1.000, .220, 1.000);
	    -moz-transition: all .8s cubic-bezier(.190, 1.000, .220, 1.000);
	     -ms-transition: all .8s cubic-bezier(.190, 1.000, .220, 1.000);
	      -o-transition: all .8s cubic-bezier(.190, 1.000, .220, 1.000);
	         transition: all .8s cubic-bezier(.190, 1.000, .220, 1.000); 
}
.hoverzoom:hover .retina {
    opacity: 1;
    box-shadow: inset 0 0 100px 50px rgba(0,0,0,.5);
    
}
.hoverzoom .retina p {
	color: #fff;
}
.hoverzoom .retina a {
	display: block;
	width: 150px;
	background: #6fc5e9;
	border: 1px solid #59afd4;
	border-radius: 4px;
	color: #fff;
	text-decoration: none;
	text-align: center;
	padding: 10px 15px;
	margin: 16px auto 0;
}

ANALISANDO

Basicamento o que nós fizemos foi:

1. Estipular uma largura para a div.hoverzoom e adicionar a propriedade position: relative para dar uma referência de posição ao elemento “.retina”.
2. Manipular o efeito de transição do estado normal para o hover com a propriedade “transition”, declarando a velocidade de transição com cubic-bezier para ter uma movimentação mais estilizada.
3. Aumentar a escala da imagem durante o processo de :hover com a propriedade “transform: scale()”.
4. Deixar a “.retina” com opacidade 0 em seu estado normal e durante o :hover com opacidade 1.
5. Estilizar os demais elementos internos da .retina.

FINALIZANDO

Esse efeito é bem simples de ser feito, mas sua apresentação é muito bacana e bem valorizada.
Futuramente iremos trazer outros tipos de efeitos com CSS3. Não percam!

Se gostaram, não deixem de comentar e compartilhar com seus amigos, ok?

Dica retirada de: TutorialWebDesign

A Turbosite compartilha conhecimento, somos uma empresa de Hospedagem de Sites com mais de 15 anos no mercado. Se precisar de uma hospedagem, sua solução é a Turbosite – Hospedagem de Sites!

O menu que vamos criar é composto de 3 níveis, título principal, sub categoria e sub-sub categoria. Uma vez que passar o mouse por cima do título, automaticamente é disparado o evento :hover que mostrará as sub categorias. A primeira série de sub-links aparecem embaixo da barra principal de navegação, então a segunda série de links irá aparecer horizontalmente a partir do primeiro sub item. Dê uma olhada na imagem.

A Estrutura HTML

Primeiro vamos precisar criar nossa estrutura HTML. Vamos utilizar a tag <nav> do HTML 5, em seguida, adicionar os links de navegação primários em uma lista desordenada.

<nav>
	<ul>
		<li><a href="#">Home</a></li>
		<li><a href="#">Tutoriais</a>
			<ul>
				<li><a href="#">CSS</a></li>
				<li><a href="#">HTML</a></li>
				<li><a href="#">JavaScript</a>
					<ul>
						<li><a href="#">jQuery</a></li>
						<li><a href="#">Angular</a></li>
					</ul>
				</li>
			</ul>
		</li>
		<li><a href="#">Artigos</a>
			<ul>
				<li><a href="#">Node.js</a></li>
				<li><a href="#">MongoDB</a></li>
			</ul>
		</li>
		<li><a href="#">Crie seu Próprio Menu</a></li>
	</ul>
</nav>

O resultado sem a inserção do CSS ficaria da seguinte forma:

Estilizando com CSS

Vamos começar com o básico, primeiro vamos apenas esconder nossos sub-links e fazê-los aparecer caso passe o mouse por cima do menu pai. Para isto, vamos utilizar o seletor :hover que, quando passado o mouse sobre o menu, os seu elementos filhos serão mostrados. Com este pequeno código já temos um resultado interessante. Passe o mouse sobre os links para ver o resultado em ação. Também centralizamos o menu.

nav ul ul {
	display: none;
}

	nav ul li:hover> ul {
		display: block;
	}

nav {
	margin: 0 auto; 
	text-align: center;
}

Agora vamos dar uma melhorada no visual adicionando cor e espaçamentos.

nav ul {
	background: #efefef; 
	background: linear-gradient(top, #efefef 0%, #bbbbbb 100%);  
	background: -moz-linear-gradient(top, #efefef 0%, #bbbbbb 100%); 
	background: -webkit-linear-gradient(top, #efefef 0%,#bbbbbb 100%); 
	box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
	padding: 0 20px;
	border-radius: 10px;  
	list-style: none;
	position: relative;
	display: inline-table;
}
	nav ul:after {
		content: ""; clear: both; display: block;
	}

Veja como está ficando até agora.

Continuando, agora vamos fazer o posicionamento dos menus, definir a cor para os sub-menus e dispor como espaços e blocos.

	nav ul li {
		float: left;
	}
		nav ul li:hover {
			background: #4b545f;
			background: linear-gradient(top, #4f5964 0%, #5f6975 40%);
			background: -moz-linear-gradient(top, #4f5964 0%, #5f6975 40%);
			background: -webkit-linear-gradient(top, #4f5964 0%,#5f6975 40%);
		}
			nav ul li:hover a {
				color: #fff;
			}
		
		nav ul li a {
			display: block; padding: 15px 20px;
			color: #757575; text-decoration: none;
		}

Neste ponto nosso menu começa a ficar interessante, ganhando um visual e funcionando de modo precário ainda. Agora, vamos adicionar os posicionamentos e cores. Veja que sub-menus agora ganham uma cor diferenciada e seus descendentes uma formatação para melhor apresentação.

	nav ul ul {
		background: #5f6975; border-radius: 0px; padding: 0;
		position: absolute; top: 100%;
	}
		nav ul ul li {
			float: none; 
			border-top: 1px solid #6b727c;
			border-bottom: 1px solid #575f6a; position: relative;
		}
			nav ul ul li a {
				padding: 15px 40px;
				color: #fff;
			}	
				nav ul ul li a:hover {
					background: #4b545f;
				}

A barra de navegação está quase completa, agora ela já está eslizada mas seus sub-menus ainda apresentam algum problema de posicionamento. Eles estão herdando configurações de seus pais, vamos mudar este comportamento para os sub-menus se posicionarem ao lado de seus elementos pai. Adicione mais este código:

	nav ul ul ul {
		position: absolute; left: 100%; top:0;
	}

Resultado:

No elemento final, adicionamos uns efeitos ao fundo, veja como ficou.

Dica: Utilizando o normalize.css, você obterá uma maior compatibilidade com browsers antigos.