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.
