Efeito de zoom com mouse sobre a imagem só com CSS

Aprenda neste tutorial como criar efeito de zoom com mouse sobre a imagem só com CSS. Também na segunda parte do vídeo você vai ver como adicionar texto na frente da foto sem que o efeito de zoom seja danificado.

Este tipo de efeito é muito utilizado em blogs e sites de notícia, por isso é interessante que você saiba como usá-lo em seus próximos layouts.

HTML

<div class="zoom">

<div class="zoom">

<img src="img/img-01.png" class="img-responsive">

<div class="text-item">

<h2>Título da imagem</h2>

</div>

</div>

CSS

.zoom {.zoom { overflow: hidden;}

.zoom img { max-width: 100%; -moz-transition: all 0.3s; -webkit-transition: all 0.3s; transition: all 0.3s;}

.zoom:hover img { -moz-transform: scale(1.1); -webkit-transform: scale(1.1); transform: scale(1.1);}

.text-item { position: absolute; left: 5%; right: 5%; bottom: 20px; z-index: 10; padding-top: 20px; padding-bottom: 20px; color: #ffffff; text-align: center; font-weight: 700; text-shadow: 0 1px 3px rgba(0,0,0,0.6);}

Aproveite e aprenda neste tutorial como criar um botão 3D com Bootstrap de um jeito rápido e muito fácil.

Você também pode ver todos os meus vídeos em meu canal no Youtube.


Publicado em 3 de agosto de 2017


Dúvidas? Deixe seu comentário.

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

*
*