Link in featured image on GreatMag: Featured posts B

Hi there! I’m working on a site for a client and I want to make the featured image in the top widget “GreatMag: Featured posts B” work as a link. My team thinks that this will improve the UX if a visitor can click anywhere on the top posts and not only on the title or description.

Our demo is live at www.sprint.blackfilm.no

I have tried following the steps in this thread but it didn’t work in the widget I wanted: Link on the featured images

Thanks in advance!

Hello there,

Thank you for reaching out to us. To accomplish it, try doing the below steps:

  1. Install and activate the TC Custom JavaScript plugin
  2. Go To Appearance > Custom JavaScript
  3. Paste the following code into the provided box
 ;(function($) {

   if( $('.athemes_featured_posts_type_b').length ) {

     $('.athemes_featured_posts_type_b .sticky-post').each(function(){

       var link    = $(this).find('a[class^="post-title-"]').attr('href');

       $(this).find('.sticky-inner').wrapInner('<a href="'+link+'"></a>');

     });

   }

})(jQuery)
  1. Update
  2. Then add this extra CSS code to Appearance > Customize > Additional CSS from dashboard.
.sticky-inner > a {
  position: relative;
  display: block;
  z-index: 2;
}

.sticky-inner > a:after {
  content: '';
  background-color: rgba(0, 0, 0, 0.5);
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;  
}

Regards,
Kharis

1 Like

Thank you @kharisblank! It work without any problems, thank you so much for great support.

Best regards,
Magnus

You’re welcome!

Please let us know in a new topic if you have any further questions, or if we can provide you with any other assistance.

Regards,
Kharis

1 Like