Hover and stacked images

HTML & CSS
1

I have a site where we added a clickable image that links to a YouTube.com live feed. A colleague suggested adding the YouTube play button on the image to make sure people know to click the image to get the live feed. The play button is stacked on top of the clickable image using CSS to position it centered relative to the original. The original image is much larger than the button.

When I hover the mouse over the base image, I get the hand and can navigate to the live feed. If I move the mouse over the YouTube Play button, the mouse remains as the hand. If I move the mouse off the button but remain over the underlying image, it changes back to the pointer and the underlying image is no longer clickable. How do I make the pointer notice that even though it’s no longer hovering over the button, it’s still hovering over the underlying image and should allow for clicking?

2

Could you please post your code (Html as a working page, and the relevant CSS) for this so that we can reproduce the issue and see what is happening?

3

Here is the code of my page. http://216.73.18.74:3461/livevideo.asp

<html>
<head>

<style>
div {
	padding:0px;
	margin:padding:0;	
}
html{
	margin:0;
	padding:0;
}
body{
	margin:0;
	padding:0;
}
img{
	margin:0;
	padding:0;
}




.YouTube
{
	position: relative;
	top: -227;
	left: 313.5;
	314px;
	
	background-color: transparent;
}
</style>


</head>
<body onLoad="init()" style="background-color:#DCD0BC">
  <a href="https://www.youtube.com/user/DioceseOfAlbany/live" target="_blank">
<img src="/images/CentenialLiturgy.jpg"  width="695" height="406"border="0">
</a>
<div id="YT" style="margin:0px; padding:0px;" class="YouTube">
<a href="https://www.youtube.com/user/DioceseOfAlbany/live" >
<img src="/images/youtube_ro.png" border="0" style="left:0px;" />
</a>
</div>       

 <script>
	function init(){
		parent.document.getElementById('homePage').width="695";
		parent.document.getElementById('homePage').height="406";
	}
	
</script>
</body>
 </html>

Please note that this page will be loaded into an iframe on a parent page. This page in question is generated using a database and classic ASP. The decision was made to do it this way rather than changing the page to .asp from .html. This preserves the analytics.

4

My initial thought is to make the button image the same size as the underlying image and mostly transparent. That way the mouse is hovering over the top image in the stack all the time. The only drawback is that the underlying image has to remain a fixed size. I think that is a good work around, but I’m still curious as to how I fix the mouse issue.

5

The problem only seems to occur in the area to the immediate right of the button, where the containing div overlaps the background image. Setting the width of the div to 68px, to match the button image, fixes this.

2 Likes
6

Thanks. I did not realize that the error only occurs to the right of the button. Thanks for catching that the DIV was wider than the image.

1 Like
7

Hi there RCDAwebmaster,

if you would like the link and it’s images
to be responsive, then try it like this…

<!DOCTYPE html>
<html lang="en">
<head>
<base href="http://216.73.18.74:3461/">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>untitled document</title>

<!--<link rel="stylesheet" href="screen.css" media="screen">-->

<style media="screen">
body {
    background-color: #dcd0bc;
    font: 1em/1.62em verdana, arial, helvetica, sans-serif;
 }
#link {
    position: relative;
    display: block;
    width: 100%; 
    max-width: 44em;
    margin: auto;
    box-shadow: 0.4em 0.4em 0.4em #999;
 }
#link img:first-of-type {
    display: block;
    width: 100%;
    height: auto;
 }
#link img:last-of-type,
#link span {
    position: absolute;
    width: 9.78%;  /* 68/695*100 */
    height: auto;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
 }
#link span {
    width: auto;
    z-index: -1;
 }
</style>

</head>
<body> 

 <a id="link" href="https://www.youtube.com/user/DioceseOfAlbany/live">
  <img src="images/CentenialLiturgy.jpg" width="695" height="406" alt="Centenial Liturgy">
  <img src="images/youtube.png" width="68" height="48" alt="youtube">
  <span>This is a link to a youtube video</span>
 </a>

</body>
</html>

coothead

8

Thanks.

9

 
 
 
 
                                        You’re welcome.

10

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