Como fazer um efeito de sobreposição de imagem simples com HTML e CSS (hover effect)

10/12/18     CSS HTML Programação Tutorial Web Design

Sabe quando você passa o mouse sobre uma imagem e um conteúdo oculto aparece? Então, que tal aprender a criar este efeito?

Neste tutorial irei ensinar como fazer isso, clique aqui uma demonstração do efeito.

Agora vamos começar e aprender como fazer, vamos lá.

1. Estrutura HTML

Pense no seguinte, neste exemplo tanto a imagem quanto o conteúdo oculto devem estar dentro de uma única div, para que quando passar o mouse sobre essa div o conteúdo oculto apareça, então é isso que paremos.

Primeiro crie a div que receberá todo o conteúdo, neste exemplo vamos chama-la de ‘caixaImg’, agora dentro dela coloque a imagem que deseja e em seguida crie uma nova div que terá todo o conteúdo oculto dentro dela e coloque nela uma classe para podermos estilizar, chamarei ela de ‘sobreposicao’.

Confira abaixo o código completo da estrutura HTML.


<div class="caixaImg">
<img src="img/img.jpg" alt="Imagem" class="imagem">

<div class="sobreposicao">
<div class="texto">Conteúdo aqui</div>
</div>
</div>

2. Estilizar a div principal

Para começar precisamos definir a nossa div que contém a classe ‘caixaImg’ como posição relativa, isso é importante para podermos posicionar corretamente o conteúdo oculto, aqui também vamos definir width de 50% e display = inline-block mas é apenas para alinhamento mesmo, não é necessário.


/* div que irá mostrar a imagem, dentro dela terá a imagem e o conteúdo oculto*/
.caixaImg {
position: relative;
width: 50%;
display: inline-block;
}

3. Estilizar a imagem

Uma coisa muito importante é colocar a imagem com o tamanho completo da div principal, para que não tenha o risco de ela acabar ficando menor ou maior do que o conteúdo oculto, confira o código.


/* deixar a imagem do tamanho da div*/
.imagem {
display: block;
width: 100%;
height: auto;
}

4. Posicionando e estilizando o conteúdo oculto

Para que o conteúdo oculto seja sobreposto a imagem, precisamos definir sua posição como absoluta, assim ele ficará ‘ligado’ a nossa div principal, além disso precisamos fazer com que ele fique do tamanho da imagem que é o mesmo tamanho da nossa div principal então para deixar do tamanho certo a já posicionar ela no devido lugar basta definirmos as propriedades “top, bottom, left e right = 0” e assim terminamos essas duas etapas.

Vamos também definir uma cor de fundo e um transition para melhorar o efeito e é claro o mais importante, definir sua opacidade como 0 para que possamos ver a imagem primeiramente.

Código completo deste passo.


/*conteudo oculto*/
.sobreposicao {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
opacity: 0;
transition: .5s ease;
background-color: #008CBA;
}

5. Mostrar conteúdo oculto com o passar do mouse

Beleza, já posicionamos o conteúdo e todo o resto agora precisamos fazer esse conteúdo aparecer quando passar o mouse sobre a imagem, mas na verdade vamos fazer essa ação do mouse na nossa div principal, mas a impressão fica sendo que aparece quando passamos o mouse na imagem, basta colocar sua opacidade = 1. Confira.


/* exibir o conteudo oculto*/
.caixaImg:hover .sobreposicao {
opacity: 1;
}

6º – Estilizando o texto oculto

Neste exemplo existe um texto dentro da nossa div oculta, então vamos editar ele. Que tal centraliza-lo vertical e horizontalmente?

Para isso basta definir sua posição como absoluta e definir as propriedades top e left = 50%, mas ainda não vai ficar centralizado, já que left = 50% faz nosso conteúdo começar a partir da metade de nossa div e não é isso que queremos, para arrumar sua posição e deixa-lo exatamente no centro basta usar a propriedade translate e definir (x,y) como -50%, confira abaixo.


/* estilização do texto oculto*/
.texto {
color: white;
font-size: 20px;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align: center;
}

É isso aí, está pronto, agora você já pode espalhar imagens com conteúdo oculto por todo o seu site, divirta-se.



Novidades do BT por email

Coloque abaixo eu email para receber em primeira mão todas as novas matérias do BT, de tutoriais, cursos e inspirações!

Comente aqui

Publique um comentário abaixo

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

compartilhe
compartilhar no Facebook compartilhar no Twitter compartilhar no Linkedin compartilhar no Pintrest compartilhar no WhatzApp compartilhar no Skype compartilhar no pocket
Sobre o BT

Tudo começou com uma simples ajuda, um colega de trabalho estava tentando criar o seu álbum de fotos digital com uma música de fundo para poder dar de presente em seu casamento, até ai não tem nada ver com Bons Tutoriais, mas vamos chegar lá... Veja mais.

Patrocínio
Desenvolvimento de identidades visuais e estratégias de marketing digital
Recomendamos
AE Dicas Comunique 9 Minuto Design Mkt News Pixel Coffee Publicinove Revelando Ideias Sala7Design Tutorial Web Design
Criar um site

© Bons Tutoriais | Desde 2008 - Direitos reservados. ❤ Design | Ps+Ai+In | PHP+HTML+CSS | WordPress