Portfolio post title on thumbnail hover

Support
#1

I’m trying to get the post title to become visible when your cursor is hovered over the post thumbnail.

This is what I have:

This is what I would like to have (ignore the text styling):

#2

Hi Warren,

Try adding this custom JS and CSS on the portfolio page.

Custom JS

(function($) {

$(document).ready(function() {
  $( ".x-iso-container-portfolio article" ).each(function( index ) {
    var title = $( this ).find('.entry-title.entry-title-portfolio a').text();
     $('head').append('<style>#'+$( this ).attr("id") +' a.entry-thumb:before{content: "' + title + '";}</style>');
  });

});
  
})(jQuery);

Custom CSS

.x-iso-container-portfolio a.entry-thumb:before {
    left: auto;
    right: auto;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    width: 100%;
    background: none;
}

Hope it helps. If it does not work please share to us a link of your site so we can have a deeper look at it.

Thanks.

#3

Thanks for helping – no luck I’m afraid!

#4

Hi @warren_aspeling,

Thank you for providing the credentials. I went ahead and replaced the CSS with:

.x-recent-posts .entry-wrap {
  position: relative;
}

.x-recent-posts .entry-wrap:before {
    left: 50%;
    top: 50%;
    transform: translate3d(-50%, -50%, 0);
    text-align: center;
    width: 100%;
    position: absolute;
    z-index: 999;
    opacity: 0;
}

.x-recent-posts .entry-wrap:hover:before {
    opacity: 1;
}

.x-recent-posts .x-portfolio .x-recent-posts-img:before {
    content: "";
}

And JS with:

(function($) {

$(document).ready(function() {
  $( ".x-recent-posts" ).each(function( index ) {
    var title = $( this ).find('.h-recent-posts').html();
     $('head').append('<style>#'+$( this ).find('article').attr("id") +' .entry-wrap:before{content: "' + title + '";}</style>');
  });

});
  
})(jQuery);

Seems to be working fine now. Please clear your browser’s cache and check your page now.

Please note that the code provided above serves as a guide only and is to help you in getting started so implementing it and maintaining the code will be out of our support scope and for further maintenance for new possible versions of the theme that may cause the customization to break, you will need to hire a developer.

Thanks!

#5

Hey @Nabeel,

Thanks for you help on this!

Looks to be working, but strangely the title only shows on 4 of the 6 posts.

2 of them don’t show the title on hover… any ideas?

#6

Hey @warren_aspeling,

To fix the issue, please replace the JS with the following one:

(function($) {
	$(document).ready(function() {
	  $( ".x-recent-posts" ).each(function( index ) {
		  if ($( this ).find('article').length > 1) {
				$( this ).find('article').each(function( index ) {
					var title = $( this ).find('.h-recent-posts').html();
					$('head').append('<style>#'+$( this ).attr("id") +' .entry-wrap:before{content: "' + title + '";}</style>');
				});
		  }
		  else {
			var title = $( this ).find('.h-recent-posts').html();
			$('head').append('<style>#'+$( this ).find('article').attr("id") +' .entry-wrap:before{content: "' + title + '";}</style>');
		  }
		
	  });

	});
})(jQuery);

Don’t forget to clear all caches including your browser’s cache after adding the code. Let us know how this goes!

#7

Hey @Nabeel

That worked like a charm! Thank you so so much!

#8

You’re most welcome!

#9

Hey Warren,

Just chiming in here to add that if you need more options to display your posts or portfolios, please consider using one of the bundled grid plugins as they allow the creation of custom skins and have more layout options. Please see the items below:

Please also remember the disclaimer posted by Nabeel. The custom code provided here is only a sample and should not be taken as part of our product features. Therefore, they will not be supported in case it causes issues in your site.

Thanks.

#10

Thanks @christian_y!

I’ll have a look into the plugins. From what Nabeel sent it seems to be working perfectly, but I will heed the warning.

Thanks again!

#11

You’re most welcome, Warren.

#12

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.