url doesn't working on css hover overlayrs?

Question

Hi guys i have this code : LINK here image in this have a link should open it when click . but when you hover the image the url doesn't working ! (why ?) sorry for my bad english!

<div class="entry">
    <a href="http://google.com">
        <img src="http://t0.gstatic.com/images?q=tbn:ANd9GcS12iyyT_pG8r8V2IkiIsL7RHw-BLWjCvqQVgMzXLnLjt3KoCbf" alt="<?php the_title(); ?>" class="postimage" />
    </a>
</div>

div.entry {
    position: relative;
    color:#000;
    box-shadow:inset 1px 1px 40px 0 rgba(0,0,0,.45);
    overflow:hidden;
    cursor:pointer;
}
img.postimage {
    height:220px;
     width:220px;
}
div.entry:after {
    content:'Click on image for more information';
    text-align:center;
    color:#fff;
    position:absolute;
    height:100%;
    top:0; left:0;
    background:rgba(0,0,0,0.8);
    opacity:0;
    transition: all 0.5s;
    -webkit-transition: all 0.5s;
}
div.entry:hover:after {
    opacity:1;
}

[Java != JavaScript](http://stackoverflow.com/a/245069/1393766). Read tag descriptions if you are not sure if you should use it. — Pshemo, Jul 21 '14 at 10:30

score 1 · Answer 1 · answered Jul 21 '14 at 10:28

You can do this by adding pointer-events: none to the overlay (or .entry:after in your case). No javascript needed for that. Example:

div.entry:hover {
    content:'Click on image for more information';
    /* ... other css rules */
    pointer-events: none;
}

Now your click will not be 'captured' but it 'bubbles up' to the underlying div.

But, as usual, IE is a troublemaker... This only works for IE11. For other IE versions you'd need javascript anyway...

score 0 · Accepted Answer · edited Jul 21 '14 at 10:40

Your overlay is appearing ABOVE the link, so no click is detected (you're clicking the overlay, not the link). You can change the overlay to be a part of the link instead. See: http://jsfiddle.net/U3QYY/3/

div.entry {
    position: relative;
    color:#000;
    box-shadow:inset 1px 1px 40px 0 rgba(0,0,0,.45);
    overflow:hidden;
    cursor:pointer;
}
img.postimage {
    height:220px;
    width:220px;
}
a:before {
    content:'Click on image for more information';
    text-align:center;
    color:#fff;
    position:absolute;
    height:100%;
    top:0; left:0;
    background:rgba(0,0,0,0.8);
    opacity:0;
    transition: all 0.5s;
    -webkit-transition: all 0.5s;
}
a:hover:before {
    opacity:1;
}

score 0 · Answer 3 · edited Jul 21 '14 at 10:41

Most probably this part in your CSS is creating the problem.

div.entry:after {
    content:'Click on image for more information';
    text-align:center;
    color:#fff;
    position:absolute;
    height:100%;
    top:0; left:0;
    background:rgba(0,0,0,0.8);
    opacity:0;
    transition: all 0.5s;
    -webkit-transition: all 0.5s;
}

Notice when you hover the mouse over the image the div.entry:after properties are hiding the linked image behind hence disallowing you to open it.

So now I think you had got the problem and you can solve it yourself in your way.

url doesn't working on css hover overlayrs?

3 Answers3