- Página Inicial
- Códigos CSS Prontos
- Efeito hover css – zoomIn
- Voltar
Efeito hover css – zoomIn
Neste tutorial veja como podemos criar um efeito hover – zoomIn simples com html e css Responsivo.
Nesta seção, projetaremos uma estrutura simples na tag <article>, <div>, <img> e <h2> para inserir o titulo.
Usaremos uma classe (.lista-artigo, .box, .box-content, e .frame) 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="lista-artigo"> <div class="box box-content"> <img src="uploads/img1.jpg" alt="img"> <div class="frame"> <h2>Front-end Developer</h2> </div> </div> </article><!--1--> <article class="lista-artigo"> <div class="box box-content"> <img src="uploads/img2.jpg" alt="img"> <div class="frame"> <h2>Front-end Developer</h2> </div> </div> </article><!--2--> <article class="lista-artigo"> <div class="box box-content"> <img src="uploads/img3.jpg" alt="img"> <div class="frame"> <h2>Front-end Developer</h2> </div> </div> </article><!--3-->
Vamos Adicionar o CSS
Nesta seção, usaremos algumas propriedades CSS para estilizar e animar o nosso hoverlay com html e css.
.lista-artigo { width: 100%; float: left; height: 100%; padding: 10px; } .box { position: relative; max-height: 300px; border-radius: 6px; overflow: hidden; } .box .frame { position: absolute; border: 2px solid #fff; z-index: 2; top: 50%; left: 50%; transform: translate(-50%, -50%); } .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: 16px; letter-spacing: 1px; } .box:hover { transition: all 0.3s ease-in-out; } .box:hover:before { transition: all 0.3s ease-in-out; } .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; } .box-content { background-color:#6b4331; } .box-content .frame { width: calc(100% - 100px); height: calc(100% - 100px); top: 50%; left: 50%; transform: translate(-50%, -50%); border-color: transparent; } .box-content h2 { margin-top: 0; top: 50%; transform: translatey(-50%); text-align: center; letter-spacing: 1px; } .box-content p { transform: translate3d(0, -10px, 0); } .box-content:hover .frame { border-color: #fff; transition: color 0.3s ease-in-out, all 0.3s ease-in-out; width: calc(100% - 20px); height: calc(100% - 20px); } .box-content:hover img { opacity:0.5; } /*Responsivo*/ /*768PX BREAKPOINT*/ @media (min-width:48em){ .lista-artigo { width: 33.3%; } }
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
183 Visualizações
Deixe um comentário