Criar efeito hover em imagens e divs nunca foi tão fácil, e isso se deve ao avanço do CSS para o css3 que tornou o desenvolvimento mais rápido e fácil para quem deseja fazer efeitos bonitos e funcionais sem depender do JavaScript. E aqui iremos fazer um Efeito hover em imagem utilizando uma propriedade que facilita isso, a transition.

Você poderá seguir o tutorial por vídeo ou seguir com o passo a passo abaixo.

Efeito hover em imagens usando a propriedade transition

No seu editor html crie duas divs e set uma imagem com tamanho que desejar, no meu caso estou usando no tamanho de 600 pixels de largura por 400 de altura.

Agora iremos para o CSS e a primeira coisa se fazer é dar um reset básico.

Com o reset adicionando começaremos a atacar o seletor container, deixando ele com o tamanho e altura que precisamos. Uma dica é deixar o tamanho desse container de acordo com o tamanho de sua imagem. Minha imagem tem 600px de largura por 400px de altura, então esse será o tamanho que usarei no container.

Agora atacando a imagem, deixando-a com as mesmas medidas da div pai.

Agora iremos para o que realmente interessa, o que fará o efeito de transição acontecer. Perceba que deixei a propriedade width com 0px, pois queremos que essa div apareça quando e só quando passar o mouse em cima da imagem. Na propriedade transition setei com 0.7 segundos .

Agora estilizando o nosso h2

E por final, o efeito hover na imagem. Traduzindo esse código, seria algo como. Quando o mouse estiver em cima da div container, acione a class container-hover. Onde setei seu width em 600px, já que lá atrás deixei ela com 0px e com a ajuda da propriedade transition: 0.7s ease que setamos na class .container-hover. feito isso, basta salvar e ver como ficou.

Podemos fazer incontáveis efeitos hover em imagens utilizando outras propriedades do CSS. Além da propriedade transition, temos a transform: scale, transform: rotateZ, transform: translateX, animation: swing, box-shadow, fade in, filter e opacity.

Publicitário por formação e curioso nas áreas de designer gráfico e programação. Atualmente estudo marketing digital, PHP e JavaScript.