sonia maklouf sonia maklouf - 4 months ago 10
CSS Question

no way to open the image's link

I'm trying to have an image with an opacity color effect on hover and the possibilty to click on it to open the image's link



.image {
position: relative;
width: 100%;
height: 100%;
}

.image img {
width: 100%;
vertical-align: top;
}

.image:after {
content: '\A';
position: absolute;
width: 100%; height:100%;
top:0; left:0;
opacity: 0;
background:yellow;
transition: all 1s;
-webkit-transition: all 1s;
}

.image:hover:after {
opacity: 1;
cursor: pointer;
}

<div class="image"><a href="http://wikipedia.org/"><img width="700" height="394" src="http://placehold.it/700x394" class="img-responsive wp-post-image" alt="Responsive image" sizes="(max-width: 700px) 100vw, 700px"></a></div>





but the problem is that they're no way to open the image's link

Answer

The problem is the absolute positioning; in this case the anchor link doesn't wrap your image, so I have moved your anchor link outside to wrap all the content:

.image {
    position: relative;
    width: 100%;
    height: 100%;
}

.image img {
    width: 100%;
    vertical-align: top;
}

.image:after {
    content: '\A';
    position: absolute;
    width: 100%; height:100%;
    top:0; left:0;
    opacity: 0;
    background:yellow;
    transition: all 1s;
    -webkit-transition: all 1s;
}

.image:hover:after {
    opacity: 1;
    cursor: pointer;
}
<a href="http://wikipedia.org/"><div class="image"><img width="700" height="394" src="http://placehold.it/700x394" class="img-responsive wp-post-image" alt="Responsive image"  sizes="(max-width: 700px) 100vw, 700px"></div></a>