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

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.