1

Como eu faço pra colocar hover em uma imagem. E quando passado o mouse apareça o hover com texto dentro.

3
  • Bom dia Thayna, você já começou a fazer algo? consegue postar pra gente o seu resultado e explicar até onde você conseguiu evoluir? Commented 1/02/2016 às 13:48
  • Bom dia, tentei fazer, mas perdi o código não sei como.
    – Thayna
    Commented 1/02/2016 às 13:50
  • Depois não consigo fazer fazer.
    – Thayna
    Commented 1/02/2016 às 13:51

2 Respostas 2

4

Não é necessário utilizar exatamente uma imagem (falo da tag img). Você pode usar uma div com background-image. Dentro dessa div você vai colocar outra div, com opacity:0. Quando passar o mouse sobre a div, você fará com que o houver da mesma, afete a div com o texto (que será a filha), alterando o valor da mesma para opacity:1.

Irei mostrar um exemplo:

.imagem{
  background-image: url(https://i.sstatic.net/lvici.jpg);  
  height:300px;
  width:400px;
  background-size:100% auto;
}

.texto{
  padding:20px;
  font-family:Arial;
  text-align:center;
  color:white;
  opacity:0;
  transition: opacity .2s linear;
  background-color:rgba(0,0,0,.7);
}

.imagem:hover .texto{
  opacity:1;
 }
<div class="imagem">
  <div class="texto"><h2>Recém casados</h2></div>
</div>

3
  • 1
    Sim, eu casei. Por isso tá essa foto aí :D Commented 1/02/2016 às 14:59
  • obg, casal bonito
    – Thayna
    Commented 1/02/2016 às 15:14
  • Poderia fornecer o motivo do -1. Eu agradeceria. A minha resposta não possui nenhum erro. Commented 9/08/2016 às 12:11
2

O elemento Pai seria a div que contém a imagem.

Essa div deve ser position: relative.

Dentro dela coloquei um span com um texto. Esse span deve ser position: absolute que estará sob alterações relativas ao elemento pai.

Daí é só colocar no centro com as propriedades CSS:

.hover-image{
  position: relative;
  width: 350px;
}

OBS: O bottom não está acima porquê fiz um efeito para o span ficar no meio. Veja a funcionalidade abaixo:


.hover-image {
  position: absolute;
  left: 0;
  top: 0;
  margin: auto;
}
.hover-image span {
  position: absolute;
  opacity: 0;
  visibility: hidden;
  bottom: 200px;
  width: 100%;
  line-height: 45px;
  height: 45px;
  display: block;
  background-color: #000;
  color: #FFF;
  text-align: center;
  font-family: "Roboto";
  left: 0;
  top: 0;
  margin: auto;
  transition: all 0.4s ease;
}
.hover-image:hover span {
  opacity: 1;
  visibility: visible;
  bottom: 0;
}
<div class="hover-image">
  <img src="http://placehold.it/350x150">
  <span class="texto">Welcome</span>
</div>

6
  • 1
    Zoom, brilhante. Ficou bom :D Commented 1/02/2016 às 14:59
  • Olooooooooooooooooco! Fui injustiçado agora! -1 ! -1 !!!!11ONZE!! Passou alguém aqui e negativou todo mundo. Peguem ele ! Commented 1/02/2016 às 15:07
  • 1
    Se alguém tiver um bom motivo para justificar os negativos, eu e o Zoom estamos a disposição para corrigir/melhorar os detalhes da resposta. Commented 1/02/2016 às 15:10
  • obg, ajudou muito
    – Thayna
    Commented 1/02/2016 às 15:14
  • vc tem site @Zoom?
    – Thayna
    Commented 1/02/2016 às 15:18

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .