homepage Welcome to WebmasterWorld Guest from 54.167.96.124
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
Overlay pseudo class content over element but keep element clickable
PublicSphere




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

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

 

DrDoc




msg:4601846
 3:25 pm on Aug 14, 2013 (gmt 0)

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?

PublicSphere




msg:4601868
 4:06 pm on Aug 14, 2013 (gmt 0)

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.

Setek




msg:4602034
 3:48 am on Aug 15, 2013 (gmt 0)

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 :)

PublicSphere




msg:4602052
 7:50 am on Aug 15, 2013 (gmt 0)

Yeah good point -- I'll make the change. Thanks

drhowarddrfine




msg:4602093
 12:09 pm on Aug 15, 2013 (gmt 0)

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.

DrDoc




msg:4602141
 3:54 pm on Aug 15, 2013 (gmt 0)

... assuming you use the HTML5 DOCTYPE, yes.

PublicSphere




msg:4602220
 8:55 pm on Aug 15, 2013 (gmt 0)

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

Paul_o_b




msg:4602263
 11:20 pm on Aug 15, 2013 (gmt 0)

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?

drhowarddrfine




msg:4602268
 11:52 pm on Aug 15, 2013 (gmt 0)

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.

PublicSphere




msg:4602349
 8:08 am on Aug 16, 2013 (gmt 0)

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;
}

Paul_o_b




msg:4602389
 10:50 am on Aug 16, 2013 (gmt 0)

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.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved