Hi There I am trying to get a background image display under my content and still show so content can go ontop of it.
Here is the code I have at the moment it is extremely simple
<div class="flower-image">
a
<style>
.flower-image{
background-image: url("/wp-content/uploads/2022/10/rose-fade-vertical.png");
background-repeat: no-repeat ;
background-position: right ;
}
</style>
</div>
This code allows for a image specified by URL to load and and some code to stop it repeating and for positioning. The issue I am having is I need the image specified in background-image to not push my existing content down the screen and sit in the same position permanently. This has been done on WordPress on the page page.php so it will do the same thing across every page.
Any help would be appreciated.
Do the following:
add position: absolute; (the content will not be pushed down)
add z-index: -1; (the image will be pushed behind the content)
But...
The content should be in a separate container.
See the snippet below.
Note: position: absolute; might cause some problems (depends on HTML & CSS). If nothing jumps out of place, everything is fine. If not, let me know and we will try to solve the problem.
.wrapper {
max-width: 100vw;
max-height: 100vh;
position: relative;
}
.content-container {
position: absolute;
}
.image-container {
position: absolute;
z-index: -1;
}
#img {
width: 100%;
object-fit: cover;
}
<div class="wrapper">
<div class="content-container">
<h1>
This is some random text
</h1>
</div>
<div class="image-container">
<img id="img" src="https://static01.nyt.com/images/2021/04/03/multimedia/03xp-april/merlin_185893383_8e41433f-4a32-4b1e-bf02-457290d0d534-superJumbo.jpg" />
</div>
</div>
I want to highlight an image when a user hovers over it.
To do that, I'd like to put an overlay over everything else (or honestly, I'd be happy putting an overlay over everything including the image, and then putting something to brighten the image as well).
Is there anyway to do this without JS? I'm happy to use a JS solution if that's all that's available, but I was wondering if there was any CSS-only trickery that could manage to do this.
Example HTML would be like this:
<body>
<div>
<Other Elements />
<img src="...." />
</div>
</body>
Preferably everything would be darkened except the tag.
EDIT: THIS IS NOT a duplicate. It is very, very different from Overlay Images
If you wrap your image overlay image in a div container like so:
<div class="wrapper">
<div class="other-content">
</div>
<div class="popup">
<img src="...">
</div>
</div>
You can use a pseudo element :before to style an overlay on your image.
.popup {
img {
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
}
&:before {
content: '';
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.8);
}
}
See example here:
https://codepen.io/dominicgan/pen/WXaXPy
I'm trying to use the :before selector to place an image over another image, but I'm finding that it simply doesn't work to place an image before an img element, only some other element. Specifically, my styles are:
.container
{
position: relative;
display: block;
}
.overlay:before
{
content: url(images/[someimage].png);
position: absolute;
left:-20px;
top: -20px;
}
and I find that this works fine:
<a href="[url]" class="container">
<span class="overlay"/>
<img width="200" src="[url]"/>
</a>
but this does not:
<a href="[url]" class="container">
<img width="200" src="[url]" class="overlay"/>
</a>
I can use a div or p element instead of that span, and the browser correctly overlays my image over the image in the img element, but if I apply the overlay class to the img itself, it doesn't work.
I'd like to get this working because that extra span offends me, but more importantly, I've got about 100 blog posts that I'd like to modify, and I can do this in one go if I could just modify the stylesheet, but if I have to go back and add an extra span element in between the a and img elements, this will be a lot more work.
Unfortunately, most browsers do not support using :after or :before on img tags.
http://lildude.co.uk/after-css-property-for-img-tag
However, it IS possible for you to accomplish what you need with JavaScript/jQuery. Check out this fiddle:
http://jsfiddle.net/xixonia/ahnGT/
$(function() {
$('.target').after('<img src="..." />');
});
Edit:
For the reason why this isn't supported, check out coreyward's answer.
The before and after pseudo-selectors don't insert HTML elements — they insert text before or after the existing content of the targeted element. Because image elements don't contain text or have descendants, neither img:before or img:after will do you any good. This is also the case for elements like <br> and <hr> for the same reason.
I found a way to make this work in pure css:
The I'm just fake content-method
a pure CSS method to enable img:after.
You can check out the CodePen: I'm just fake content or see the source.
Source & Snippet
img {
/* hide the default image */
height:0;
width:0;
/* hide fake content */
font-size:0;
color:transparent;
/* enable absolute position for pseudo elements */
position:relative;
/* and this is just fake content */
content:"I'm just fake content";
}
/* initial absolute position */
img:before,
img:after {
position:absolute;
top:0;
left:0;
}
/* img:before - chrome & others */
img:before {
content:url(http://placekitten.com/g/250/250);
}
/* img:before - firefox */
body:not(:-moz-handler-blocked) img:before {
padding:125px;
background:url(http://placekitten.com/g/250/250) no-repeat;
}
/* img:after */
img:after {
/* width of img:before */
left:250px;
content:url(http://lorempixel.com/350/200/city/1);
}
<img
alt="You are watching the ~ I'm just fake content ~ method"
/>
Browser support
✓ Chrome 10+
✓ Firefox 11+
✓ Opera 9.8+
✓ Safari
No support
⊗ Internet Explorer 8 / 9
Please test in other browsers
Due to the nature of <img> being a replaced element, document styling doesn’t affected it.
To reference it anyway, <picture> provides an ideal, native wrapper that can have pseudo-elements attached to it, like so:
img::after,
picture::after{
content:"\1F63B";
font-size:larger;
margin:-1em;
}
<img src="//placekitten.com/110/80">
<picture>
<img src="//placekitten.com/110/80">
</picture>
Here's another solution using a div container for img while using :hover::after to achieve the effect.
The HTML as follows:
<div id=img_container><img src='' style='height:300px; width:300px;'></img></div>
The CSS as follows:
#img_container {
margin:0;
position:relative;
}
#img_container:hover::after {
content:'';
display:block;
position:absolute;
width:300px;
height:300px;
background:url('');
z-index:1;
top:0;
}
To see it in action, check out the fiddle I've created. Just so you know this is cross browser friendly and there's no need to trick the code with 'fake content'.
The pseudo-elements generated by ::before and ::after are contained by the element's formatting box, and thus don't apply to replaced elements such as img, or to br elements.
https://developer.mozilla.org/en-US/docs/Web/CSS/::after
I think the best way to look at why this doesn't work is that :before and :after insert their content before or after the content within the tag you're applying them to. So it works with divs or spans (or most other tags) because you can put content inside them.
<div>
:before
Content
:after
</div>
However, an img is a self-contained, self-closing tag, and since it has no separate closing tag, you can't put anything inside of it. (That would need to look like <img>Content</img>, but of course that doesn't work.)
I know this is an old topic, but it pops up first on Google, so hopefully this will help others learn.
This one works for me:
html
<ul>
<li> name here </li>
</ul>
CSS
ul li::before {
content: url(../images/check.png);
}
::after may be used to display the fallback image of an image
See the example below, first 2 img tags are point to the broken urls. But the second one displays the fallback image instead of the default broken logo from the browser. However, I'm not sure this's any practical, I find it kind of tricky to get it to work right.
img {
position: relative;
display: inline-block;
width: 300px;
height: 200px;
vertical-align: top;
}
img:not(:first-child)::after {
position: absolute;
left: 0; top: 0; right: 0; bottom: 0;
content: "<" attr(alt) "> NOT FOUND";
border: 1px dashed #999;
background: url(https://cdn.dribbble.com/users/1012566/screenshots/4187820/topic-2.jpg) center/100%;
}
<img src="https://source.unsplash.com/random/100/75" alt="logo">
<img src="https://source.unsplash.com/random/100/75" alt="logo">
<img src="https://source.unsplash.com/random/100x75" alt="logo">
In these cases it is preferable to use the <figure> tag, which allows you to manage the css in an optimal way
This way you can use after just on the figure
Example
<div class="exemple">
<figure>
<img src="img1.jpg"/>
</figure>
<figure>
<img src="img2.jpg"/>
</figure>
</div>
<img> is a replaced element and using :before or :after pseudo-elements on it works if the image fails to load and otherwise it does not work. If you intend to have a fallback in case of image load failure,please refer to https://stackoverflow.com/a/71478688/14204452
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<style>
#image img{
display: inline-block;
max-width: 50%;
}
#image::after {
position: absolute;
top: 0;
content: url('https://img.icons8.com/plasticine/100/000000/about.png');
}
</style>
<title>img before</title>
</head>
<body>
<a id="image" href="">
<img src="https://static.remove.bg/remove-bg-web/5c20d2ecc9ddb1b6c85540a333ec65e2c616dbbd/assets/start-1abfb4fe2980eabfbbaaa4365a0692539f7cd2725f324f904565a9a744f8e214.jpg">
</a>
</body>
</html>
Try this code
.button:after {
content: ""
position: absolute
width: 70px
background-image: url('../../images/frontapp/mid-icon.svg')
display: inline-block
background-size: contain
background-repeat: no-repeat
right: 0
bottom: 0
}
I tried and found a simpler method to do so. Here is the HTML:
<img id="message_icon" src="messages2.png">
<p id="empty_para"></p>
What I did was place an empty <p> tag after my image tag. Now I will use p::before to show the image and position it according to my needs. Here is the CSS:
#empty_para
{
display:inline;
font-size:40;
background:orange;
border:2px solid red;
position:relative;
top:-400px;
left:100px;
}
#empty_para::before
{
content: url('messages.png');
}
Try it.
Try ::after on previous element.
Just give the Image "position: relative" and it will work
I'm trying to overlay a transparent image on hover using CSS.
There is an answer here but it doesn't work in IE7 or IE8. Would anyone know how to do this?
I'm trying to keep super-light so don't really want to use js or anything similar.
Thanks
I checked your link and came up with this solution based on that.
HTML:
<div class="image">
<img src="xy.jpg" alt="" />
<img class="hoverimage" src="xy_hover.jpg" alt="" />
</div>
CSS:
.image { position: relative; width: 184px; height: 219px; }
.hoverimage { position: absolute; top: 0; left: 0; display: none; }
.image:hover .hoverimage { display: block; }
Should work in all browsers including IE8 and IE7. It won't work in IE6 because it only allows :hover on certain elements like links (<a>). If you want to support IE6, change .image to be an <a> instead of a <div> and give it display: block;.
This still doesn't work on IE7/8 AFAIK, so I'm afraid this won't answer the question.
However, I have ended up on this page when I forget how to make this work using modern methods, so I'm placing the answer here for reference.
I've only been able to do this by placing the img within a container/wrapper div, as img elements won't accept psuedo-classes like :after.
<div class="container"><img src="http://placekitten.com/240/320" alt="icanhaz"></div>
Then the CSS is styled to provide a pseudo element on hover.
.container {
position: relative;
}
.container:hover:after {
content: '';
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
background: rgba(0,0,0,0.5); /* Here you may also use images, gradients, etc */
}
See the example here
Usually we recreate the image that is supposed to have a transparent overlay in the .png format. .Jpeg is a flat image format which doesn't support transparency.
the next step we take is to have something like this :
<div style="Background-Image:Url(BackgroundImage.Jpg);Width:500px;Height:500px" >
<div style="Background-Image:Url(OverlayImage.Png);Width:50%;Height:50%" >
...
</div>
</div>
This is the closest to how I could understand your question
http://elektrikhost.com/
You see the penguins thats over the header on the columns? I'm trying to get them to be over the header and list. I'm wondering what would you do? use position absolute, or relative? I'm stuck.
HTML:
<section class="starter">
<img src="../images/plan-icon.png" width="62" height="73" alt="Plan Icon">
<h2>Starter Plan</h2>
<ul>
<li><span>5GB Disk Space</span></li>
<li><span>Unmetered Bandwidth</span></li>
<li><span>Unlimited Add-on Domains</span></li>
<li><span>Unlimited Subdomains</span></li>
<li><span>Unlimited Email/FTP Accounts</span></li>
<li><span>Unlimited MySQL Databases</span></li>
<li><span>Shell access upon request</span></li>
</ul>
<img src="images/starterplan.png" width="192" height="51" alt="Starter Plan">
</section><!-- //.starter -->
.plan-icon is the image.
Needs to look like this:
You can simply set the image style to float: right
.starter { position: relative; }
.starter img { position: absolute; top: 5px; left: 140px; }
The idea is that the image is positioned "absolute" so it can be anywhere within the confines of its parent element ".starter". This will not work if ".starter" is not set to relative.
I got this to work in Firebug, the .starter img selector might need changing but its the idea of absolute positioning that you should take away from this.
try
<img src="../images/plan-icon.png" width="62" height="73" alt="Plan Icon" style="float:right;">
I might even suggest adding a padding: 5px 5px; to that, but that's just me ...
Use relative positioning. You can also give it a z-index to place it "on top" of any elements.
Regardless, take a look at this page. It should help you out:
http://w3schools.com/CSS/css_positioning.asp
If it were me, I'd add this CSS.
#plans-wrap section { position: relative; }
#plans-wrap section .icon { position: absolute; right: 0px; top: 0px; }