How to play a block on top of the other block?

Navigation
1

I would like to create a div , containing a block of text and an image, and the image needs to cover the text, by moving the mouse in the image, it will become semi transparent, thus showing the text under it

Something like 

<div>
    <span>Meu texto de exemplo aqui</span>
    <img src='www.imagem.com.br/imagem123.jpg' alt="" />
</div>

How would I do this in css ?

    
asked by anonymous 21.11.2014 / 12:54

2 answers

1

That's what our friend William Barbosa replied to link

  

Simple solution with :hover

     

Note that I have added classes so that I do not have to use the selector directly in the element name, I advise you to do the same in your html .

Only to prevent elements after the div element, which contains the image and the text, it is necessary to set the properties of it.

Ex: 

.box{
  position: relative;
  float: left;
  height: 128px;
  width: 128px;
  margin-right: 10px;
}

.texto, .imagem {
  position: absolute;
}

.imagem:hover {
  opacity: 0.6;  
}
<div class="box">
    <span class="texto"> Lai32290 </span>
    <img class="imagem" src='http://i.stack.imgur.com/fS6G8.jpg?s=128&g=1' alt="" />
</div>
<div class="box">
    <span class="texto"> Lai32290 </span>
    <img class="imagem" src='http://i.stack.imgur.com/fS6G8.jpg?s=128&g=1' alt="" />
</div>

Take a look at this link link , have some good examples.

    
23.11.2014 / 23:38
0

Simple solution with :hover

Note that I have added classes so that I do not have to use the selector directly in the element name, I advise you to do the same in your html . 

.texto, .imagem {
  position: absolute;
}

.imagem:hover {
  opacity: 0.6;  
}
<div>
    <span class="texto"> Lai32290 </span>
    <img class="imagem" src='http://i.stack.imgur.com/fS6G8.jpg?s=128&g=1' alt="" />
</div>
    
21.11.2014 / 13:13
Site works on localhost, but not on UolHost (permissions?) Search before loading Kendo Grid