- Página Inicial
- Códigos CSS Prontos
- Efeito hover css – zoomIn img
- Voltar
Efeito hover css – zoomIn img
Neste tutorial veja como podemos criar um efeito hover – zoomIn com html e css Responsivo.
Nesta seção, projetaremos uma estrutura simples na tag <article>, <div>, <img> e <h2> para inserir o titulo.
Usaremos as classes (.box-article, .box e a class .zoom-in) para dar o formato e estilizar com css.
Essas é a tags e classes que usaremos para criar o nosso hoverlay com html e Css
Vamos Adicionar o HTML
<article class="box-article"> <div class="box zoom-in"> <img src="uploads/imagem.jpg" alt="Front-end"> <h2>Front-end</h2> <p><a href="#" title="Developer">DEVELOPER</a></p> </div> </article>
Vamos Adicionar o CSS
Nesta seção, usaremos algumas propriedades CSS para estilizar e animar o nosso Efeito hover css – zoomIn img com html e css.
.box-article { max-width: 420px; width: 100%; height: 100%; padding: 10px; margin: auto; } .box { position: relative; max-height: 300px; border-radius: 4px; overflow: hidden; box-shadow: 1px 0px 1.2px 0px #e3e3e3; } .box h2, .box p { position: absolute; color: #fff; z-index: 2; width: 100%; transition: opacity 0.2s, transform 0.3s; } .box h2 { font-weight: 500; font-size: 22px; margin-bottom: 0; letter-spacing: 1px; } .box p { bottom: 0; font-size: 14px; letter-spacing: 1px; } .box h2, .box p { position: absolute; color: #fff; z-index: 2; width: 100%; transition: opacity 0.2s, transform 0.3s; } .box h2 { font-weight: 500; font-size: 32px; margin-bottom: 0; letter-spacing: 1px; } .box p { bottom: 0; font-size: 22px; font-weight: bold; letter-spacing: 8px; } .box p a{ text-decoration: none; color: #efca05; } .box img { position: relative; width: 100%; height: 100%; z-index: 1; transition: all 0.3s ease-in-out; } .box img:hover { transition: all 0.3s ease-in-out; } .box img:after { content: ""; position: absolute; background-color: rgba(0, 0, 0, 0.6); width: 100%; height: 100%; top: 0; left: 0; opacity: 0; } .box img:hover { transition: all 0.3s ease-in-out; } .zoom-in h2 { top: 50%; transform: translatey(-50%); text-align: center; margin: 0; } .zoom-in p { text-align: center; top: calc(50% + 25px); transition: all 0.3s ease; transform: scale(1.2); opacity: 0; } .zoom-in:hover img { transform: scale(1.1); filter: grayscale(100%); } .zoom-in:hover p { transform: scale(1); transition: all 0.3s ease; opacity: 1; }
Combinando as Duas seções acima Html e Css temos o seguinte Resultado!
Veja o Resultado baixo!
Baixar Código Veja Funcionando
Publicado por: Loop Nerd
114 Visualizações
Deixe um comentário