Sign in to follow this  

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



Description

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.

1
2
3
4
5
6
7
<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.

1
2
3
4
5
6
/* 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.

1
2
3
4
5
6
/* 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.

01
02
03
04
05
06
07
08
09
10
11
/*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.

1
2
3
4
/* 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.

01
02
03
04
05
06
07
08
09
10
11
12
/* 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.

  • Curtir (+1) 1


Recommended Comments

There are no comments to display.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Add a Comment

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.