[flacnvinylParticipant]

We love essential grid. Great plugin and love how light it is. How can we disable the image overlay? In otherwords, we just want the link clickable, not the featured image. Too much frustration from users.

[RahulModerator]

Hey There,

Thank you for dropping by!

Sure, just add this code at your customizer’s custom javascript, this will remove the links from the images.

jQuery(function($){
$('.page-template-template-layout-portfolio-php .entry-featured a, .page-template-template-layout-portfolio-php .entry-header a').each(function(){
$(this).attr('href','#');
$(this).click(function(e){e.preventDefault();});
});
});

Hope this helps.

[flacnvinylParticipant]

This reply has been marked as private.

[RupokMember]

Hi there,

Sorry for the confusion. Kindly remove the above code and add this under Custom > CSS in the Customizer.

.tg-item-link {
  pointer-events: none;
}

Hope this helps.

[flacnvinylParticipant]

This reply has been marked as private.

[RupokMember]

Hi there,

Thanks for updating. But I can’t see the code on your site. It’s a simple bit of code and must work if you add this correctly as I have tested on your site. If you are using the Customizer > Custom > CSS then make sure the code above this is also correct and closed properly.

If you still think you added this correctly, then provide your login credentials so that we could check.

Cheers!

[flacnvinylParticipant]

This reply has been marked as private.

[flacnvinylParticipant]

This reply has been marked as private.

[Rue NelModerator]

Hello Again Drake,

I am another staff checking on this thread! I am confused because in your original post and the post title, you have mentioned of Essential Grid. Upon checking your page there was no Essential Grid and what I found is a grid from TheGrid plugin. If you have been using the Essential grid, one of the great feature is the ability to edit the skin. You can do anything you like to the skin. Anyway since you are using TheGrid plugin, to resolve your issue which is to disable the overlay and just want to display the featured image of the grid item, please edit your page in Cornerstone and insert the following custom css in the settings tab, Settings > Custom CSS

#grid-8417 .tg-item-overlay,
#grid-8417 .tg-center-outer {
    display: none;
}

Hope this helps. Please let me know how it goes.

[flacnvinylParticipant]

This reply has been marked as private.

[flacnvinylParticipant]

This reply has been marked as private.

[RadModerator]

Hi there,

I went ahead and added this CSS,

.tg-link-button, .tg-item-link, .tg-item-overlay {
display: none !important;
}
.tg-item-image {
opacity:1 !important;
-webkit-transition: none !important;
    -moz-transition: none !important;
    -ms-transition: none !important;
    -o-transition: none !important;
    transition: none !important;
}

Cheers!

[flacnvinylParticipant]

This reply has been marked as private.

[RadModerator]

Hi there,

I thought that the featured image shouldn’t be clickable and overlay should be disabled. Would you mind providing more details about this?

How can we disable the image overlay? In otherwords, we just want the link clickable, not the featured image.

This is how it’s currently setup without the CSS I provided.

1. The overlay is when the image is hover, indicating it’s clickable. Hence, I provided the CSS that removes overlay which also removes the click indication

Hence, I provided the CSS that disables the overlay as well as the click indication.

2. Links is already clickable, the same with link icon, it’s clickable too, but since you wish to disable the overlay in which the link icon is already part of it, then I provided that disable the link icon too

Since link icon is part of overlay and featured image, I also added the CSS that disables it.

3. Featured image is clickable by default but you have this custom CSS that prevents the clicking

.tg-item-link {
  pointer-events: none;
}

Since you wish to make the featured image not clickable, I skip this that CSS that disables the linking on featured image. Removing it will make the image clickable again.

It’s a bit confusing 🙂

Thanks!

[flacnvinylParticipant]

I apologize. I believe I phrased that request poorly. By default there are two hover icons. One is for the featured image, the other is a direct link to the blog/post/whatever. I wanted both of those icons gone and just be able to hover over the image and click the image.

The code you mentioned 3. has now been removed. So how can we get to the point where we just have a normal hover/click action like in, for example, the ‘recent posts’ module in Cornerstone? Right now, for example, you can’t click on the image, you HAVE to click on the tiny little url link.

[Author]

Posts