Make Whole Portfolio Thumbnail Clickable


#1

Does anyone know how to make the whole thumbnail clickable? I’m trying to remove the arrow and plus sign that appear during the hover state on a thumbnail.


#2

Could you please share the page URL?


#3

Hello,

Please add the following JavaScript snippet on Theme Options > Advanced > Custom JS and save your changes.

(function($){
    $('.mk-portfolio-item').each(function(){
         var href = $(this).find('a.hover-icon').attr('href');
  
         $(this).on('click', function(e) {
              var senderElementTag = e.target.nodeName;

              // Do no propagate to parent when either an <a> tag
              // or an <svg> element is clicked. These elements usually
              // have other functionalities attached to them.
              if (!/a|svg/i.test(senderElementTag)) {
                   // Simulate behavior of clicking a link.
                   window.location.href = href;
              }
         } );
     });
})(jQuery);

Then add the following CSS snippet on Theme Options > Advanced > Custom CSS and save your changes.

.mk-portfolio-item {
     cursor: pointer;
}

After that the whole portfolio thumbnail will be clickable.

Best regards,
Artbees Support.


#4

The URL is www.turntoamplify.com

Will try out the JavaScript snippet, thank you!


#5

Thank you! Is there a way to show the categories on the hover state but remove the arrow and plus button?

If you look at this screenshot, it doesn’t look good with those two elements.