This might seem like a really silly question but it’s got my flummoxed! I’ve got a div that has a background image to it. It also has some text as well.
I’ve set the background to become slightly transparent when somebody rolls over. This works fine but it also makes the text transparent too. How do I stop the text from changing as well?
The div is like this:
<div style="background-image: url(/images/shop.jpg);" class="block">
<p class="block text">Our <span style="font-weight: bold;">Shop</span></p></div>
and the css is this:
.block:hover {
opacity: 0.6;
-webkit-transition: opacity 1s, text-shadow 1s;
transition: opacity 1s, text-shadow 1s;
text-shadow: 0 0 3px #fffff8;
color: rgba(255, 255, 255, 1)!important;
}
.block {
opacity: 1;
-webkit-transition: opacity 1s;
transition: opacity 1s;
background-size: 328px 238px;
float: left;
position: relative;
height: 238px;
width: 328px;
}
Opacity will apply to everything. You can simply use rgba() instead (the last value being hte opacity) and it’ll only affect the background color, not anything else.
You can’t use opacity on a parent and not have it cascade down.
it’s a simple fix if your bg was a solid color, as Ryan suggested. For a BG image it’s a bit more involved tho.
here are some options:
background-image: rgba (255,255,255, .5) , url(/images/shop.jpg);
the BG would be “opaque” but with a white tint, which if your pg bg is white it would give the illusion of being transparent
another thing you could do is have multiple images , and swap them on :hover.
the most versatile method tho would be to use an absolute positioned pseudo element where you place your background and apply the opacity to that, on :hover
.block{ position: relative;}
.block:after { content:''; top:0; left:0; right:0; bottom:0; background-image: url(/images/shop.jpg);}
.block:hover:after{opacity:.6;}
BTW, I would avoid inline CSS.
hope that helps
PaulOB
July 21, 2015, 2:00pm
4
Dresden beat me to it but I was also going to suggest using a pseudo element for the opacity fade on the image.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
.block {
transition: text-shadow 1s;
float: left;
position: relative;
height: 238px;
width: 328px;
color: rgba(255, 255, 255, 1);
}
.block:after {
content:"";
position:absolute;
z-index:1;
top:0;
left:0;
right:0;
bottom:0;
opacity: 1;
-webkit-transition: opacity 1s;
transition: opacity 1s;
background:url(/images/shop.jpg) no-repeat 0 0;
background-size: 328px 238px;
}
.block:hover {text-shadow: 0 0 3px #fffff8;}
.block:hover:after {opacity: 0.6;}
.block p{position:relative;z-index:2;}
</style>
</head>
<body>
<div class="block">
<p class="text">Our <span style="font-weight: bold;">Shop</span></p>
</div>
</body>
</html>
1 Like
I’m not sure if I’ve done something wrong but I couldn’t get the text to stay white when I did that
This is what I’ve got
.block {
opacity: 1;
-webkit-transition: opacity 1s;
transition: opacity 1s;
background-size: 328px 238px;
float: left;
position: relative;
height: 238px;
width: 328px;
color: rgba(255, 255, 255, 1);
}
.block:hover {
opacity: 0.6;
-webkit-transition: opacity 1s, text-shadow 1s,color 1s;
transition: opacity 1s, text-shadow 1s,color 1s;
text-shadow: 0 0 3px #fffff8;
color: rgba(255, 255, 255, 1)!important;
}
.block:after {
content:"";
position:absolute;
z-index:1;
top:0;
left:0;
right:0;
bottom:0;
opacity: 1;
-webkit-transition: opacity 1s;
transition: opacity 1s;
background-repeat: no-repeat;
background-position: 0 0;
background-size: 328px 238px;
}
.block:hover {text-shadow: 0 0 3px #fffff8;}
.block:hover:after {opacity: 0.6;}
.block p{position:relative;z-index:2;top: 100px;}
PaulOB
July 22, 2015, 4:44pm
6
Hi,
You don’t seem to be using the code I gave and you are still changing the opacity of .block on hover which is still going to fade the text.
The example I gave only reduces the opacity of the image by using opacity only on the :after element.
.block:hover:after {opacity: 0.6;}
The color of the text is not altered in my example. Try copying my whole code and add your image into the mix and then test from there.
I removed the opacity from everything except the :after element but now it’s not fading at all. I can’t add the image to the css because it’s dynamically loaded and there’s a series of ten divs all with different background images.
PaulOB
July 23, 2015, 9:19am
8
Then instead of :after add an element inside the div on which you can apply your inline styles and the rules that I gave you above.
Here is a fully working example with inline image.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
.block {
transition: text-shadow 1s;
float: left;
position: relative;
height: 238px;
width: 328px;
color: rgba(255, 255, 255, 1);
}
.opaque {
position:absolute;
z-index:1;
top:0;
left:0;
right:0;
bottom:0;
opacity: 1;
-webkit-transition: opacity 1s;
transition: opacity 1s;
background:repeat:no-repeat;
background-size: 328px 238px;
}
.block:hover {text-shadow: 0 0 3px #000;}
.opaque:hover {opacity: 0.6;}
.block p{position:relative;z-index:2;}
</style>
</head>
<body>
<div class="block"><i class="opaque" style="background-image: url(http://www.placehold.it/328x238);"></i>
<p class="text">Our <span style="font-weight: bold;">Shop</span></p>
</div>
</body>
</html>
Thank you that works perfectly, how do I add a ‘glow’ (I guess text-shadow) to the text when somebody rolls over the div too?
PaulOB
July 23, 2015, 12:06pm
10
You can add a text-shadow here:
.block:hover {text-shadow: 0 0 3px #000;}
e.g. For a red glow:
.block:hover {text-shadow: 0 0 15px rgba(240, 15, 0, 1);}
I decided to increase the font size instead when I rolled over but that didn’t work. It works if I roll over the text but not if I roll over the div itself. This is what I’ve got:
.block p:hover {font-size: 25px;, transition: font-size 1s}
I also tried this but it didn’t work at all:
.block:hover {font-size: 25px;, transition: font-size 1s}
PaulOB
July 23, 2015, 2:58pm
12
You need the hover on the div and then change the p inside.
e.g.
Assuming that’s how you set the size on the p element in the first place.
Sorry I don’t quite understand what you mean?
I’ve added the font size to the .block class (I also tried it in the .block:hover class but that didn’t work either.
ronpat
July 23, 2015, 3:29pm
14
The comma should not follow the semicolon in these examples.
That was my mistake sorry, I added the comma in when I posted the code here. It wasn’t in the actual code though
PaulOB
July 23, 2015, 5:00pm
16
Just add the code I gave you without the comma Ron mentioned and it will work.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
.block {
transition: text-shadow 1s;
float: left;
position: relative;
height: 238px;
width: 328px;
color: rgba(255, 255, 255, 1);
}
.opaque {
position:absolute;
z-index:1;
top:0;
left:0;
right:0;
bottom:0;
opacity: 1;
-webkit-transition: opacity 1s;
transition: opacity 1s;
background:repeat:no-repeat;
background-size: 328px 238px;
}
.block:hover {text-shadow: 0 0 15px rgba(240, 15, 0, 0.5)}
.opaque:hover {opacity: 0.6;}
.block p{position:relative;z-index:2;transition: font-size 1s}
.block:hover p {font-size: 25px; }
</style>
</head>
<body>
<div class="block"><i class="opaque" style="background-image: url(http://www.placehold.it/328x238);"></i>
<p class="text">Our <span style="font-weight: bold;">Shop</span></p>
</div>
</body>
</html
Thank you, I think I’d originally misread what you’d said - sorry
It now works thank you
is a great code.
system
October 26, 2015, 5:21pm
19
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.
