Css div overlay on mouseover

HTML & CSS
1

i want to have an overlay displayed over my div on mouseover…

my code is -

<div class="divCompanyLogo"><a href="#"><img src="../images/folder/logo.jpg" class="companyLogo" height="105" width="140"></a><div class="titleHolder">title of image</div></div>

if i simply set a class for .divCompanyLogo:hover and change colours this only changes the main div it doesnt seem to overlay the image or internal div, they are unchanged…

how would i create this effect where everything in the div is changing colour on mouseover?

2

You could change the background of the containing div and lower the opacity of the img. While this is in fact an underlay, the effect may resemble a colour overlay.

3

You could do something like this:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
.divCompanyLogo {
	float:left;
	margin:10px;
}
.divCompanyLogo a {
	display:block;
	text-decoration:none;
	position:relative;
	padding:10px;
	border:1px solid red;
	text-align:center;
	background:#f9f9f9;
}
.divCompanyLogo img {
	display:block;
	margin:0 0 5px;
	border:1px solid #000;
}
.titleHolder {
	display:block;
}
.divCompanyLogo a:after {
	content:"";
	position:absolute;
	top:0;
	bottom:100%;
	left:0;
	right:0;
	pointer-events:none;
	transition:all .5s ease;
}
.divCompanyLogo a:hover:after {
	bottom:0;
	background:rgba(10, 73, 123, 0.2);
}
</style>
</head>

<body>
<div class="divCompanyLogo"><a href="#"><img src="http://lorempixel.com/105/140/" class="companyLogo" height="105" width="140"> <span class="titleHolder">Title of image</span> </a> </div>
<div class="divCompanyLogo"><a href="#"><img src="http://lorempixel.com/105/140/" class="companyLogo" height="105" width="140"> <span class="titleHolder">Title of image</span></a> </div>
<div class="divCompanyLogo"><a href="#"><img src="http://lorempixel.com/105/140/" class="companyLogo" height="105" width="140"> <span class="titleHolder">Title of image</span></a> </div>
</body>
</html>
4

that looks about it… i will try it on my actual code tomorrow thanks

5

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