Overlay pseudo class content over element but keep element clickable - CSS forum at WebmasterWorld - WebmasterWorld

Forum Moderators: not2easy

Message Too Old, No Replies

Overlay pseudo class content over element but keep element clickable

PublicSphere

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

DrDoc

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

WebmasterWorld Senior Member

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?

PublicSphere

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.

Setek

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

PublicSphere

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

10+ Year Member

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

drhowarddrfine

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.

DrDoc

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

WebmasterWorld Senior Member

10+ Year Member

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

PublicSphere

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

Paul_o_b

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?

drhowarddrfine

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.

PublicSphere

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

Paul_o_b

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.