CODEWITHSUNDEEP
htmlcssforeground
Himmators
Himmators

Reputation: 15016

Is there a foreground equivalent to background-image in css?

I want to add some shine to an element on webpage. I would prefer if I don't have to add additional html to the page. I want the image to appear in front of the element rather than behind. What's the best way to do this?

Upvotes: 65

Views: 95949

Answers (5)

Mori
Mori

Reputation: 6850

Use an absolutely positioned <img> element:

img {
  position: absolute;
  opacity: 0.3;
  pointer-events: none;
}

iframe {
  width: 500px;
  height: 300px;
  border: 0;
}
<img src="https://i.sstatic.net/rET57.jpg" alt="Foreground image">

<iframe src="https://example.com/"></iframe>

Upvotes: 0

Rob W
Rob W

Reputation: 349142

To achieve a "foreground image" (without extra HTML code), you can use a pseudo-element (::before / :before) plus the CSS pointer-events. The last property is needed so that the user can actually click through the layer "as if it did not exist".

Here's an example (using a colour whose alpha channel is 50% so that you can see that the real elements can actually be focused). http://jsfiddle.net/JxNdT/

#cont {
  width: 200px;
  height: 200px;
  border: 1px solid #aaa;
  /*To show the boundaries of the element*/
}

#cont:before {
  position: absolute;
  content: '';
  background: rgba(0, 0, 0, 0.5);
  width: 200px;
  height: 200px;
  pointer-events: none;
}
<div id="cont">
  Test<br>
  <input type="text" placeholder="edit">
</div>

​ PS. I picked the ::before pseudo-element, because that naturally leads to the correct positioning. If I pick ::after, then I have to add position:relative; to the real element (#cont), and top:0;left:0; to the pseudo-element (::after).

PPS. To get the foreground effect on elements without a fixed size, an additional element is needed. This wrapper element requires the position:relative;display:inline-block; styles. Set the width and height of the pseudo-element to 100%, and the pseudo-element will stretch to the width and height of the wrapper element. Demo: http://jsfiddle.net/JxNdT/1/.

Upvotes: 78

nicolallias
nicolallias

Reputation: 1122

A neat solution: box-sizing + padding-left, see more at css-tricks

Somewhere in your HTML:

<img id="test_replacement" src="test.png" alt="test" />

The CSS for replacing the image (on hovering)

#test_replacement {
    width: 200px; //must be the size of your image (and the replacement one)
    height: 200px; //idem
    display: block;
}
#test_replacement:hover {
    box-sizing: border-box;
    background-image: url('somewhere/other_image.png');
    padding-left: 200px; //at least the size of the width
}

Upvotes: 0

Bart S
Bart S

Reputation: 1808

If you need a white-transparent foreground

This is for future visitors like me who are considering adding a white-transparent foreground to an element to communicate that it's hidden / disabled for instance. You can often achieve your goal by simply lowering the opacity below 1:

.is-hidden {
    opacity: 0.5;
}
visible
<span class="is-hidden">hidden</span>
visible

Upvotes: 5

Anirudha
Anirudha

Reputation: 32817

You can use this css

#yourImage
{
z-index: 1; 
}

NOTE

Set the z-index to index greater the the z-index of the element over which you are putting the image.

If you have not specified any z-index then 1 would do the work.

You can also set z-index to -1,in that case the image would always be at background!

Upvotes: 3

Related Questions