Como usar o Hover em imagem no CSS
Como usar o Hover em imagem no CSS
Neste tutorial vamos criar um Efeito Hoverlay na imagem com html e css
.
Nesta seção, projetaremos uma estrutura simples na tag <div>, <h1> e a <p> para inserir o texto de descrição.
Essas são as tags que usaremos para criar o nosso Efeito
.Hoverlay na imagem
Vamos Adicionar o HTML
<div class="card card-bg"> <div class="overlay"> <h1>Front-end</h1> <p>Loop Nerd - códigos Html e css prontos para agilizar o seu tempo</p> </div> </div>
Vamos Adicionar o CSS
Nesta seção, usaremos algumas propriedades CSS para estilizar o nosso Efeito hoverlay na imagem
.
.card{ width: 250px; height: 320px; overflow:hidden; display: block; margin: auto; position:relative; background-size:cover; background-position:center center; } .overlay{ position:absolute; top: 0; left: 0; width:100%; height:100%; background: rgba(1,1,1,0.7); transition-duration: 0.3s; opacity: 0; } .overlay > h1{ text-transform: uppercase; color: white; padding: 110px 0 0 0; font-family: 'open_sansregular'; font-weight: 500; font-size: 1.2em; margin: 0 auto; width: 80%; transition-duration: 0.6s; padding-bottom: 10px; } .overlay > p{ color: white; width: 80%; margin: 0 auto; font-family: 'open_sansregular'; font-weight: 300; font-size: 0.9em; padding-top:8px; } .overlay:hover{ opacity: 1; } .overlay:hover > h1 { padding: 100px 0 5px 0; } .card-bg { background-image: url('../uploads/card.jpg'); }
Combinando as Duas seções acima com Html e Css temos o seguinte Resultado!
Veja o Resultado baixo!
Olá Jefferson!
Que bom que blog te ajudou.
Obrigado pela visita.
Sucesso!
Obrigado ajudou muito!