Welcome to WebmasterWorld Guest from 54.162.12.134

Forum Moderators: not2easy

Message Too Old, No Replies

Overlay pseudo class content over element but keep element clickable

     
2:15 pm on Aug 14, 2013 (gmt 0)

10+ Year Member



I have an element with a link in it. The element has a pseudo class, which overlays on top of the element using position: absolute. It looks like this:


<div class="video-thumbnail">
<a href=#"><img src="img"></a>
</div>


And the CSS looks like this:


.video-thumbnail {
position: relative;
}
.video-thumbnail:after {
content: '';
display: block;
position: absolute;
top: 40px;
left: 50%;
margin: -20px 0 0 -10px;
background: url('../img/tv_play_hover.png') no-repeat;
opacity: 0.8;
z-index: 998;
width: 50px;
height: 50px;
}
.tv-features .video-thumbnail a {
display: block;
z-index: 999;
position: relative;
}


I can get the play icon to appear over the image but when the mouse goes over the play icon the link is no longer clickable because the play icon content covers the link.

I'm trying to get the video play image to appear on top of the image inside the thumbnail div, whilst also not preventing the link from being clickable in the space where the pseudo class content appears.

I can't figure it out though.

Has anyone ever tried this? I can't seem to find any examples online.

Thanks,
Chris
3:25 pm on Aug 14, 2013 (gmt 0)

WebmasterWorld Senior Member drdoc is a WebmasterWorld Top Contributor of All Time 10+ Year Member



You would need to pass the click on via JavaScript. However, that's all more trouble than it's worth, in this case.

How about if you simply make the image the background of your anchor, and use the play icon as your image inside it?
4:06 pm on Aug 14, 2013 (gmt 0)

10+ Year Member



The content is generated through the CMS. I would rather not feed the image URL into an inline style.

I have figured a way of doing it though. You have to add an extra element and apply the pseudo class to that element, nested inside the <a>:


<div class="video-thumbnail">
<a href=#">
<div class="play-icon">
<img src="img">
</div>
</a>
</div>


Bit of a bummer having to add extra code.
3:48 am on Aug 15, 2013 (gmt 0)

10+ Year Member



Just a minor grievance:

A
<div>
(block-level) shouldn't go inside an
<a>
(inline)

Other than that, glad you solved it :)

* Edit: by this, I mean, use a span instead :)
7:50 am on Aug 15, 2013 (gmt 0)

10+ Year Member



Yeah good point -- I'll make the change. Thanks
12:09 pm on Aug 15, 2013 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



A <div> (block-level) shouldn't go inside an <a> (inline)

This is no longer true and it is valid to have div elements inside anchors.
3:54 pm on Aug 15, 2013 (gmt 0)

WebmasterWorld Senior Member drdoc is a WebmasterWorld Top Contributor of All Time 10+ Year Member



... assuming you use the HTML5 DOCTYPE, yes.
8:55 pm on Aug 15, 2013 (gmt 0)

10+ Year Member



yeah it's html5. You could also use a CSS triangle with three borders and only one with color to get a play icon, to reduce images
11:20 pm on Aug 15, 2013 (gmt 0)

10+ Year Member



I may have misunderstood the requirement but why didn't you just use the :after pseudo class on the anchor and it will be part of the anchor anc clickable?
11:52 pm on Aug 15, 2013 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



There is no reason not to be using the so-called "HTML5 DOCTYPE". Notice, first, that there is no 5 in it:

<!DOCTYPE html>


Second, it puts all browsers into standards mode, which is its only purpose nowadays.

In any case, an anchor around a div element will work either way. It will just be flagged as invalid by the validator if you use the HTML4.01 doctype.
8:08 am on Aug 16, 2013 (gmt 0)

10+ Year Member



I may have misunderstood the requirement but why didn't you just use the :after pseudo class on the anchor and it will be part of the anchor anc clickable?


Problem is you have to use z-index to get the parent of the img to display over the top of the image, but still have the <a> clickable. So you have to use something like this:


.play-icon {
position: relative;
display: block;
}
.play-icon:after {
content: '';
display: block;
position: absolute;
top: 50%;
left: 50%;
margin: -28px 0 0 -10px;
background: url('../img/tv_play.png') no-repeat;
opacity: 0.8;
z-index: 999;
width: 50px;
height: 50px;
}
10:50 am on Aug 16, 2013 (gmt 0)

10+ Year Member



I still don't understand the logic :)

In your example 2 you have nested a div inside the anchor and you say that it works. Using the pseudo class on the anchor is much the same thing as it adds content inside the anchor and will obey the same positioning scheme as your div would.

e.g.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
a {
float:left;
position:relative;
}
a img {
display:block;
width:200px;
height:200px;
background:red;
}

a:after {
content:" ";
position:absolute;
left:75px;
top:75px;
width:50px;
height:50px;
background:green url(path_to_image.gif) no-repeat 0 0;
border-radius:50%;
}
</style>
</head>

<body>
<div><a href="#"><img src="#" width="200" height="200" alt="test"></a></div>
</body>
</html>

However I guess that you may have something else in the mix that I'm missing.
 

Featured Threads

Hot Threads This Week

Hot Threads This Month