CSS Help: color div on mouseover

HTML & CSS
1

Hi, I need some CSS help :slight_smile: How can I add some color on mouse over to the div element, but still have the background image visible?

My code is:

<div class="col" style=" background-image: url(/image_1.jpg); background-repeat: no-repeat; background-position: center bottom; height: 402px; background-size: cover; width: 32.333%;margin-right: 0.5%;">

Something similar to https://about.flipboard.com/blog/

Thanks!

2

I don’t think you can do that, even if the background image has a transparent background. But I’m not a CSS expert.

V/r,

:slight_smile:

3

I’m confused as to what you want. The background image is set to cover, which means it will take up the entire space, leaving no room for some background color to just seep through.

So…

4

Could not opacity be used somehow? Or only if it were not a CSS background?

5

Well, I was wondering if the background image has a transparent background, if the div were placed over (or inside another) div, would that work?

V/r,

:slight_smile:

6

You can do it like this if I understand what you want.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
.col{position:relative}
.col:after{
	content:"";	
	position:absolute;
	left:0;
	top:0;
	right:0;
	bottom:0;
	transition:all .3s ease;
}
.col:hover:after{
	background:rgba(255, 0, 0, 0.4)	
}

</style>
</head>

<body>
<div class="col" style="background-image: url(http://www.pmob.co.uk/temp/images/zimg5.jpg); background-repeat: no-repeat; background-position: center bottom; height: 402px; background-size: cover; width: 32.333%;margin-right: 0.5%;"></div>
</body>
</html>

You use the :after pseudo element to put a coloured rgba background on top of the image to get the effect.

I did a more complicated demo here some years ago.

1 Like
7

Perfect! Thanks, Paul! It works beautifully!

8

It should take on that background, in that specific situation. Because the transparency will basically create an “open window” sort of situation. Imagine a … underground trap. Like the door traps. Imagine that door is open. Pretend that door being open = transparency in the image (the floor). Red can bleed through.

Perhaps not hte best example. My head isn’t quite clear right now :smiley: .

1 Like
9

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.