Como eu faço pra colocar hover em uma imagem. E quando passado o mouse apareça o hover com texto dentro.
-
Bom dia Thayna, você já começou a fazer algo? consegue postar pra gente o seu resultado e explicar até onde você conseguiu evoluir?– Felipe AssunçãoCommented 1/02/2016 às 13:48
-
Bom dia, tentei fazer, mas perdi o código não sei como.– ThaynaCommented 1/02/2016 às 13:50
-
Depois não consigo fazer fazer.– ThaynaCommented 1/02/2016 às 13:51
Adicione um comentário
|
2 Respostas
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>
-
1
-
-
Poderia fornecer o motivo do -1. Eu agradeceria. A minha resposta não possui nenhum erro. Commented 9/08/2016 às 12:11
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>
-
1
-
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
-
1Se 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
-
-