How to use Hover in my images to display text above it

Asked

Viewed 4,623 times

1

This is the full code of pág. in html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Galeria de Fotos</title>
<link href="estilo.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="corpo">
  <div id="banner"></div>
  <div id="menup">
    <ul>
      <li><a href="index.html">Início</a></li>
      <li><a href="contexto.html">Contexto</a></li>
      <li><a href="personagens.html">Personagens</a></li>
      <li><a href="narrador.html">Narrador</a></li>
      <li><a href="enredo.html">enredo</a></li>
    </ul>
  </div>
   <br>
  <br>
  
  <div id="conteudo">
     <div class="fotos"><img src="basilio.jpg" /></div>
     <div class="fotos"><img src="luisa.jpg" /></div> 
     <div class="fotos"><img src="jorge.jpg" /></div>
     <div class="fotos"><img src="juliana.jpg" /></div>
     <div class="fotos"><img src="leopoldina.jpg" /></div>
     <div class="fotos"><img src="dona felicidade.jpg" /></div>
     <div class="texto"> luisa trai jorge</div>
  </div>
  <br>
  <br>
  <br>
  <br>
  <div id="rodape">
    <p>Criado pelos alunos do 2ºB ETIM Informática</p>
    <p>ETEC Ferraz de Vasconcelos | 2016 &copy;</p>
  </div>
</div>
</body>


</html>

And this is the CSS code

.fotos{  
  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;
 }

What I want is to basically hover over the photo and show a text on top of the photo, in case, one for each photo, of each character.

css html5

  • was bad... I forgot the code... already I will put the complete code

  • I suggest you rephrase the question correctly, the code you posted below as an answer is actually part of the right question ?

  • Right!!! Sorry, I’m new here..

  • @Renan Carlos, help me, if you make it clear.. I need to resolve this soon you know.. Thank you from now on!

  • 1

    I am voting to close this question as out of scope because beyond very old, there does not seem to be much interest on the part of the user who drafted the question, and has low levels of interest.

1 answer

0

Here is an example basic:

#Container{
 width:90%;
 height:auto;
 padding:10px;
 background:#d3d3d3;
 position:relative;
}
#foto{
 width:200px;
 height:100px;
 fonte-size:16px;
 background:#abcdef;
 position: relative;
 top: 5px;
 left:50px;
 line-height:100px;
}
#comentario {
 position:relative; top:-80px;
 left:170px;
 padding:2px;
 line-height:20px;
 background:#333;
 color:#fff;
 display: block;
 width:120px;
 opacity: 0;

 -webkit-transition: all 300ms ease;
 -moz-transition: all 300ms ease;
 -ms-transition: all 300ms ease;
 -o-transition: all 300ms ease;
 transition: all 300ms ease;
}

#foto:hover  #comentario{
      opacity: 1;
}
<div id="Container">
 <div id="foto"><img src="basilio.jpg"/> Aqui vai a foto do Basilio
         <div id="comentario">E aqui o comentário sobre o Basilio</div>
   </div>
</div>

I believe the code is self-explanatory. When you hover the mouse over the DIV with the id="foto" displays the comment. IMPORTANT: To DIV Comment must be inside the DIV where will pass the mouse!

  • Very grateful!!! Helped a lot . I will test.. I thank you!

  • @Brendachicarelli I hope I helped, if you have more doubts. Change the question with what you need.

Browser other questions tagged css html5

You are not signed in. Login or sign up in order to post.