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

Asked

Viewed 755 times

1

I’d like to create a div, containing a block of text and an image, and the image needs to cover the text, while passing the mouse on the image, the image will make it semi transparent, thus showing the text that is underneath 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 that in css?

html css

  • Post an example of what you did, and what’s happening so we can help you better.

  • Some examples of Hover with CSS: with animation or popup | sprite

2 answers

1

That’s what our friend William Barbosa responded in /a/41337/18328

Simple solution with :hover

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

Only to prevent the elements after the element div, containing the image and the text, it is necessary to define its properties.

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 http://www.hongkiat.com/blog/css3-image-captions/, have some good examples.

0

Simple solution with :hover

Note that I added classes so I don’t 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>

  • It did work, but since I have more elements after the image, they lost alignment

  • I wanted to make the same effect of this site http://www.templatemonster.com/demo/50772.html, go to the Product page of this site

Browser other questions tagged html css

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