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
Related
I have come across a fragment of CSS that works. I would like to understand why it works for my own edification. My question is a general one on the sematics of using :after in CSS.
The Wordpress Twenty Nineteen theme puts a dark filter on feature images in order to make the (white) header text more readable.
I was searching for a way to remove the dark filter on specific feature images.
I found a post that suggests this css:
.site-header.featured-image:after {
background: none;
}
It works a treat!
Using Firefox inspector I see that .site-header & .featured-image are both classes of an enclosing <header> element. Layout is flex.
I'm trying to get my head round this usage of :after. My search of :after suggests that is a way of adding 'content' after an element. This example add no content.. instead it seems to be modifying/overriding an existing property.
If I remove ':after' it stops working, so It's definitely necessary.
Can any kind expert explain what is going on here and/or point me to a spec that explains it?
Thank you
What it actually appear to be seeing is specificity.
What :after does is add an element after the last child or content of the element that :after is applied to. See: https://developer.mozilla.org/en-US/docs/Web/CSS/::after
Here is a rough example
.featured-image {
position:relative;
padding:5px;
}
.featured-image > p {
position: relative;
z-index:10;
}
.featured-image:after {
position:absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
content: '';
border: 1px solid black;
background-color: #CCC;
z-index:1;
}
.site-header.featured-image:after {
background: none;
}
<div class="featured-image"><p> :after will have a background</p></div>
<div class="site-header featured-image"><p> :after wont't have a background 2</p></div>
As .site-header.featured-image:after is more specific than .featured-image:after, .site-header.featured-image:after takes preference for any conflicting styles.
With ::after and ::before you can add html elements or at least something that mimics the functionality of an html element.
::before will be placed before all the elements inside the element and ::after would be the last element.
As an example, Say we already have this markup,
<div class="some-div">
<h1>some text</h1>
<div>Another div</div>
<!-- bunch of other elements -->
</div>
If we add the following css,
.some-div::after,
.some-div::before {
content: "";
display: block;
}
It'll result in this markup,
<div class="some-div">
::before
<h1>some text</h1>
<div>Another div</div>
<!-- bunch of other elements -->
::after
</div>
Now, I'm guessing that your Wordpress theme adds an after element with a background-color of some value that overlays the image. And by setting the background of that ::after element to none you overwrite those styles and get rid of the overlay.
This snippet further elaborates what happens in the theme.
.some-div {
width: 20rem;
height: 20rem;
}
.img {
position: relative;
background-color: orangered;
width: 100%;
height: 100%;
}
.some-div:hover .img::after {
position: absolute;
top: 0;
left: 0;
content: "";
display: block;
width: 100%;
height: 100%;
background-color: black;
opacity: .3;
}
<div class="some-div">
<div class="img"></div>
<div>
I'd like to change the background image of the body (or my section) on link hover as in this example:
http://www.passion-pictures.com/paris/directors/
Is there any way to do it without using JS.
I only know how to code HTML/CSS
EDIT :
When I Hover on the first link (Michelle) it changes the background of my section as expected.
But when I hover on the second link (Franck) the top of my second link background begins under my first link. So the top of my default background is still visible.
My links are displayed vertically
It is possible but there will be too much HTML code and CSS workarounds.
if you still want in CSS only then refer this code - change css background on hover
HTML code
<div class=container>
<div class="link">
bg1
<div class=background></div>
bg2
<div class=background><div>
</div>
</div>
CSS Code
div.link > a {
displya: inline-block !important;
position: relative !important;
z-index: 5;
}
.bg1:hover + .background {
background: red;
}
.bg2:hover + .background {
background: green;
}
.background {
background: transparent;
position: absolute;
width:100%;
height: 100%;
top:0;
left: 0;
}
This will give you an idea of implementation but I'll suggest you go with JS that is a much better way of doing it.
Hope this might help you
HTML
<div class="container">
bg1
</div>
CSS
.bg1:hover::after {
content: "";
position: fixed;
top: 0;
left: 0;
background: red;
width: 100%;
height: 100%;
z-index: -1; /* index would get changed based on your need */
}
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
Okay, so I'm building a WordPress site and the page in question can be seen here: http://test.pr-tech.com/power-line-markers/
The issue I am having is that I am using mix-blend-mode for one of my div containers to make use a 'lighten' blend on the background.
It works perfectly, but the issue I am having is that unfortunately the child elements inside the container (i.e. the text) are also inheriting the blend mode, and therefore it's making my text 'blend' as well, which isn't what I want (I want the text to have NO blend mode).
Anyways, you can see the code I am using below:
#category-intro-text {
padding: 0.625em 0.938em;
mix-blend-mode: lighten;
background-color: rgba(220, 235, 255, 0.8); repeat;
}
I tried applying something like 'mix-blend-mode: none;' to the text, but that doesn't work.
I've searched Google for an answer to this pretty extensively, but alas, there isn't much on this topic (if anything at all).
I realise you asked this a while ago but I've been playing with the same issue today and managed to fix it like this.
Wrap the content inside the #category-intro-text div with another div that is positioned relatively. Ultimately, you'll want to add the style to your css and not inline as I've done here.
<div id="category-intro-text">
<div style="position: relative;">
<h1>Power Line Markers</h1>
Etc. Etc.
</div>
</div>
Then remove the background colour and blending information you've got in the stylesheet for the #category-intro-text div. You should end up with...
#category-intro-text {
padding: 0.625em 0.938em;
position: relative;
}
Finally, use a ::before pseudo element to add the blended layer.
#category-intro-text::before {
content: "";
display: block;
height: 100%;
position: absolute;
top: 0;
left: 0;
width: 100%;
background-color: rgba(220, 235, 255,0.8);
mix-blend-mode: lighten;
}
Hopefully that will do it. It is working perfectly for me with a multiply layer.
EDIT: Here is a Fiddle forked from the previous answer.
I thought I had it worked out with the isolation property, but no. I didn't have much luck researching a solution for this issue either.
I suppose you could use this old trick: http://jsfiddle.net/cwdtqma7/
HTML:
<div class="intro-wrap">
<div class="intro-background"></div>
<div class="intro-content">
<h1>Hello</h1>
<p>Welcome to the thing.</p>
</div>
</div>
CSS:
body {
background: url('http://test.pr-tech.com/wp-content/themes/prtech/images/power-line-markers-bg.jpg') top left no-repeat;
background-size: 800px;
font-family: sans-serif;
}
.intro-wrap {
position: relative;
}
.intro-background {
background: url('http://test.pr-tech.com/wp-content/themes/prtech/images/category-intro-bg.png');
mix-blend-mode: lighten;
padding: 32px;
width: 300px;
height: 300px;
}
.intro-content {
position: absolute;
top: 0;
left: 32px;
}
Why use mix-blend-mode when there's background-blend-mode(maybe you have already tried that!) for that purpose. Actually mix-blend-modes blends the element it is applied on with everything beneath it. On the other hand background-blend-mode applied on a background blends only with the the background that is beneath it.
You can do this-
.outer-wrapper {
background: url(<url>), #fb3;
background-blend-mode: exclusion;
padding: 2em 4em;
}
.inner-text {
/**styling of you text***/
}
How to use mix-blend-mode, but not have it affect child elements?
Building upon #shanem's answer I found this solution
function change(id){
document.querySelector(id).style.backgroundColor="violet";
}
.group{
height:10rem;
width:10rem;
position:absolute;
visibility: hidden;
}
.group::before{
content:"";
visibility: visible;
position:absolute;
height:100%;
width:100%;
background-color:inherit;
mix-blend-mode:multiply;
z-index:-1;
}
.btn{
background-color:red;
color:white;
visibility: visible;
padding:0.5rem;
}
<div id="g1" class="group" style="background-color:cyan;">
<input type="button" class="btn" value="change" onclick="change('#g1')"/>
</div>
<div id="g2" class="group" style="margin:1.5rem;background-color:yellow">
<input type="button" class="btn" value="change" onclick="change('#g2')"/>
</div>
The best part is that you can directly change the background-color using javascript.
The only caveat (if you'd want to call it that) is that every child element must set visibility: visible;
Okay, I know this basic question has been asked (and I've done this before) but this is different.
http://matiny.tk/warframe/mission.html
Okay, you see all that stuff moving? It is in the <section> of this...
<div id="main">
<img src="images/ch1.jpg" alt="" id="ch1" />
<img src="images/tango.jpg" alt="" id="tango"/>
<section>
<img src="images/pngs/loka.png" alt="" id="loka" />
<img src="images/pngs/blood.png" alt="" id="blood" />
<img src="images/pngs/smoke.png" alt="" id="smoke" />
<img src="images/pngs/stalk.png" alt="" id="stalk" />
</section>
With the following style...
#loka, #blood, #smoke, #stalk {
position: absolute;
width: 100%;
left: 0;
bottom: 0;
}
#main {
width: 100%;
text-align: center;
position: relative;
overflow: hidden;
height: 100vh;
}
And with some animations, you know how that goes.
I want when a person hovers over the "Chapter 1" image (the 1st <a>) for the <section> to appear only then, and stay invisible otherwise. It looks like the pngs in the <section> are overlaid on top of everything.
Ok, so I use z-index: -1. The images disappear.
I make the Chapter 1 thumbnail absolute and I try then, and I still fail. Can you help me out?
Here you go.
a {
padding:5px;
position: relative;
z-index: 1;
}
section {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 0;
opacity: 0;
transition: opacity 1200ms;
}
a:first-child:hover ~ section {opacity: 1;}
Important parts: make sure the z-index of the links is higher than that of section.
However, I took the time and liberty to improve your code drastically. Especially with an eye on expansion of your page and SEO.
Here it is.
Improved SEO: using a list with proper text values and links
For screenreader: links with proper text
Prettier fade in and animation (in my opinion. This is very subjective and you should adjust to what you like!)
Better structured CSS (I used SCSS in the fiddle though)
very specific css answer based on your html structure:
section {display:none;}
#main a:first-child:hover ~ section {
display:block;
}
heres a fiddle demonstrating it. (i didnt bother to give your images a proper src)
the ~ is the sibling selector, which doesnt get enough love :)
Add display:none to your section like
section {
display: none;
}
And I see that when you hover over the first a, you add a class chapter1 to the body, that is good. Just add this to your css:
.chapter1 section {
display: block !important;
}
And it should work.