Image overlay on hover

alright, I am using an old post by @RyanReese done in 2012 here:

https://www.sitepoint.com/community/t/overlapping-5-images-with-mouseover-effect/13917/2?u=cockerstyle23

I have modified the code to do what I want, which is overlay an image perfectly. Allowing me to use more font styling vs just regular font and an opacity adjustment.

I have everything functioning correctly. The problem is when I lay out 3 images, I can give them 3 different overlay images, however I cannot run 3 separate background images…here is a test page ive been trying to get it to work on:

this is the list of code harvested off of Ryan’s original post and modified:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
ul.test{
	list-style:none;
	margin:10px;
	padding:60px 0 0 0;
	clear:both;
	height:100px
}
.test li{
	width:300px;
	height:550px;
	float:left;
	margin-right:10px;
}
.test li a{
	width:300px;
	height:550px;
	float:left;
	position:relative;	
	text-decoration:none;
	background:url(images/hanks.jpg) no-repeat left top;
	border:0px solid red;
}
.test li a img{
	visibility:hidden;
	position:absolute;
	top: 0px;
	border:0px solid blue;
	left: 0px;
	z-index:100;
}
.test li a:hover,.test li a:hover img{visibility:visible}
/* ie x-index fix*/
.one a{z-index:10}
.two a{z-index:9}
.three a{z-index:8}


</style>
</head>
<body>
<ul class="test">
	<li class="one"><a href="http://www.chiefedc.com/hanks.html"><img src="images/hanks.png" width="300" height="550" alt="" /></a></li>
	<li class="two"><a href="http://www.chiefedc.com/spinners.html"><img src="images/spinners.png" width="300" height="550" alt="Vocano-over" /></a></li>
	<li class="three"><a href="http://www.chiefedc.com/misc.html"><img src="images/misc.png" width="300" height="550" alt="Vocano-over" /></a></li>
</ul>

Some help would be greatly appreciated.

Thanks,
Kyle

here is the Test Page I am working with. Since I am a new user it wouldn’t allow me to post more than 2 URL’s

Using the code posted above, is this what you mean?

.test li a {
    width:300px;
    height:550px;
    float:left;
    position:relative;	
    text-decoration:none;
    border:0px solid red;
    background-repeat:no-repeat;
    background-position:left top;
}
/* different images */
.one {background:url(images/hanks.jpg);z-index:10}
.two {background:url(images/hanks.jpg);z-index:9}
.three {background:url(images/hanks.jpg);z-index:8}

Hi there cockerstyle23,

and a warm welcome to these forums. :sunglasses:

Try adding something like this …

.test li:nth-child(2) a {
    background:url(images/spinners.jpg) no-repeat left top;
 }
.test li:nth-child(3) a {
    background:url(images/misc.jpg) no-repeat left top;
 }

…to your stylesheet.

coothead

1 Like

Hi there cockerstyle23,

if you want a more responsive example, try this…

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
<base href="http://chiefedc.com/">
<title>untitled document</title>
<!--<link rel="stylesheet" href="screen.css" media="screen">-->
<style media="screen">
.test {
    display: flex;
    justify-content: space-between;
    max-width: 57.5em;
    margin: 0.625em auto;
    padding: 0;
    list-style: none;
 }
.test li { 
    width: 32.53%;
    background-image: url(images/hanks.jpg);
    background-size: 100% auto;
 }
.test li:nth-child(2)  {
    background-image: url(images/spinners.jpg);
 }
.test li:nth-child(3) {
    background-image: url(images/misc.jpg);
 }
.test li img {
    display: block;
    max-width: 100%;
    height: auto;
    visibility: hidden;
 }
.test li:hover img {
    visibility: visible;
 }
</style>
</head>
<body>
<ul class="test">
 <li><a href="http://www.chiefedc.com/hanks.html"><img src="images/hanks.png" width="300" height="550" alt=""></a></li>
 <li><a href="http://www.chiefedc.com/spinners.html"><img src="images/spinners.png" width="300" height="550" alt="Vocano-over"></a></li>
 <li><a href="http://www.chiefedc.com/misc.html"><img src="images/misc.png" width="300" height="550" alt="Vocano-over"></a></li>
</ul>
</body>
</html>

coothead

2 Likes

Hi there cockerstyle23,

all you need now is, three reworked cat images. :mask:

These can be found in the attachment. :sunglasses:

cockerstyle23-reworked-images.zip (68.5KB)

coothead

1 Like

Thanks for the help, it worked flawlessly. The cat images were just used as a filler until i can populate with the correct images. I figured what better than some cats lol.

1 Like

Well, actually i doesn’t. :scream:

It is no longer responsive. :cold_sweat:

To get you going in the right direction, check out the attachment. :yum:

cockerstyle23.zip (396.3 KB)

coothead

1 Like

This is a very late and probably useless submission. I am posting it because flexbox tends to cause a drag on my old PC and sometimes there is a need to reduce the load on the browser to speed up the site. So, please consider this an alternative only. In small doses, flexbox rocks!

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Image Overlay on Hover</title>
<!--
https://www.sitepoint.com/community/t/image-overlay-on-hover/240246
cockerstyle23
Oct 16,2016 10:50 PM
-->
    <style type="text/css">
ul.test {
    list-style:none;
    display:table;
    table-layout:fixed;
    border-spacing:10px 0;  /* your choice */
    padding:0;
    margin:0 auto;  /* centers the ul */
    outline:1px dashed magenta;  /* TEST Outline. To Be Deleted. */
}
.test li {
    display:table-cell;
    vertical-align:top;
}
.test li a {
    display:block;
    text-decoration:none;
    background-repeat:no-repeat;
    background-position:left top;
    background-size:100% 100%;  /* sets the coverage of the background image */
}
.test li a img {
    display:block;
    max-width:100%;
    height:auto;
}
.test li a:hover img {opacity:0;}

.test li:nth-child(1) a {background-image:url(images/hanks.png)}
.test li:nth-child(2) a {background-image:url(images/spinners.png)}
.test li:nth-child(3) a {background-image:url(images/misc.png)}

    </style>
</head>
<body>

<ul class="test">
    <li><a href="http://www.chiefedc.com/hanks.html"><img src="images/kittens-1-259w.png" width="259" height="550" alt=""></a></li>
    <li><a href="http://www.chiefedc.com/spinners.html"><img src="images/kittens-2-259w.png" width="259" height="550" alt="Vocano-over"></a></li>
    <li><a href="http://www.chiefedc.com/misc.html"><img src="images/kittens-3-259w.png" width="259" height="550" alt="Vocano-over"></a></li>
</ul>

</body>
</html>

And the cropped and stitched images, of course.

kittens-images-259x550.zip (676.1 KB)

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