Styling Question

Support
#1

Hopefully this is pretty easy to answer.

The styling for our recent posts shortcode colors the text red when on-hover over the image, as well as eases the image black.

I’d like to replicate this styling on our grid (The Grid), portfolio, and news page. Presently on those pages the image has the same background ease as the recent posts shortcodes on the homepage, however the text turning red-on hover doesn’t happen when the user on-hovers over the image.

#2

Hello There,

Thanks for writing in! Please be informed that the recent posts element and the grid, the portfolio and news pages does not share the same structure and styling. The color of the recent posts elements relies on the link color and link hover color which you may have set in X > Theme Options > Typography > Site Links.

You may need to edit your The Grid skin to match with the recent post element. To know more how you can edit the grid skin, please check this out: https://theme-one.com/docs/the-grid/#edit_skin

If needed, please provide us the url of the page where we can find your recent posts element, the grid and other pages so that we can take a closer look.

Regards.

#3

Secure note sent.

#4

Hello There,

Thanks for providing the information.

To resolve your issue, please add the following CSS code in the X > Theme Options > Global CSS (http://prntscr.com/evui3r)

.tg-item .tg-item-title a,
.x-iso-container .hentry .entry-title a {
    transition: color 0.5s ease;
}

.tg-item:hover .tg-item-title a,
.x-iso-container .hentry:hover .entry-title a {
    color: red !important;
}

Please let us know if this works out for you.

#5

That works perfect. Thanks!

#6

One other thing. We need the background image to fade when you hover over the text. So far it only does it one way when you hover over the image (which also turns the text red). If hovering over the text it should also fade the image.

#7

Hi @Xyxzor,

As I checked your site it works the same. Both ways are fading, either hovering the text or the image.

The code also you added above will fade both ways.

Not sure if it is not working well. Please share us a screen cast of what you mean.

Thank you so much.

#8

If you hover over the text first the background doesn’t fade also. Both only trigger when the image is hovered over.

#9

Hi again,

To have a hover effect upon hovering the title, try adding the following code in the Theme Options > JS:

jQuery(document).ready(function($){
	$('.entry-wrap > .entry-header').hover(function() {
		$(this).parents('article').find('.entry-thumb img').css('opacity', '0.15');
	}, function(){
		$(this).parents('article').find('.entry-thumb img').css('opacity', '1');
	});
});

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

#10

Didn’t work.

#11

Hi again,

I checked your setup and couldn’t find the code, I went ahead and added the above code in Theme Options > JS and it’s working just fine. Please clear your browser’s cache and check the site again.

Cheers!

#12

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