Jump to content

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


iBassini
 Share

Recommended Posts

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.

 

  • Curtir (+1) 1

9dd35565353000e11f3d1fc3aa5f6307.gif

Aquela pessoa que ajuda os outros simplesmente porque deveria ou precisa ser feito, e porque é a coisa certa a fazer, é sem dúvida, um super-herói de verdade.

- Stan Lee

Link to comment
Share on other sites

  • 529
  • 675
  • 7

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share



×
×
  • Create New...

pc jenkins GIF by South Park

AdBlock extension detected!

GGames is maintained by advertisements for our visitors.

Please disable your browser's AdBlock Extension first, in order to use our Forum.

Rest assured, our ads will not disturb your browsing and reading.

I've Dissable