How to use hover in my images to appear a text above it [duplicate]

Navigation
1

This is the complete code on p. 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 basically to hover the mouse over the photo and a text appears on top of the photo, in case, for each photo, of each character.

    
asked by anonymous 30.08.2016 / 04:01

1 answer

0

Here's a basic example: 

#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 mouse over DIV with id="foto" it displays the comment. IMPORTANT: The DIV Comment must be within DIV where you will move the mouse!

    
30.08.2016 / 05:12
How to create a dynamic query with Left Join? Change view by controller (Ng-Click)