CODEWITHSUNDEEP
wordpresscss
Marcelo Srougi
Marcelo Srougi

Reputation: 71

Remove href link from images with overlay

I need to turn the products listed in http://srougi.biz/gb/portfolio_listing/ into non-clickable items, but without loose its overlay effect. And since its a wordpress site, that I can't change the code, my only option is do it with CSS. I've tried to put pointer-events:none and cursor:default in the image, but it lost its overlay effect. I will appreciate your help.

Upvotes: 0

Views: 210

Answers (2)

Sheeban Singaram
Sheeban Singaram

Reputation: 357

we don't have a option to handle the events in css. use this jquery snippet to fix $('.isotope-item .thumbnail a').click(function(e) e.preventDefault(); });

Upvotes: 1

Vahid Hallaji
Vahid Hallaji

Reputation: 7447

To deactivate the links in this case, you need to add some javascript code.

JS: Add this before </body> in the theme file: footer.php

<script>
    var thumbnails = document.getElementsByClassName('thumbnail');
    for(i = 0; i < thumbnails.length; i++){
        thumbnails[i].getElementsByTagName("a")[0].setAttribute("onclick", "return false;");
    }
</script>

CSS: Style to remove pointer from link.

.thumbnail a {
    cursor: default !important;
}

Upvotes: 0

Related Questions