Apply color overlay to recent post images

[Smallman]

Hi,

We use a blue wash rgba(36, 54, 127, 0.5); over all the hero/header/background images on our site normally but I’m really struggling to apply this to the recent posts image .x-recent-posts-img only seems to impact hover color. The site is www.symnexconsulting.com

Thanks

Matt

[rad]

Hi Matt,

Thanks for reaching out.

You have applied a CSS but for image background only, it should be applied as hover styling like this

.x-recent-posts a:hover .has-post-thumbnail .x-recent-posts-img:after {
    opacity: 0.5;
    background-color: rgb(36, 54, 127);
}

As you can see, I moved the 0.5 as opacity, this is to create a see-through color and so to override the existing 0.85 opacity.

Cheers!

[Smallman]

Thanks - This is for the hover styling. I’m happy with the default overlay for hover but was trying to change the non hover styling to put an opaque blue layer over the top.

[christian]

Hey Matt,

Sorry for the confusion. Please change the code to this:

/*  default */
.x-recent-posts .has-post-thumbnail .x-recent-posts-img:after {
    opacity: 0.5;
    background: rgba(36, 54, 127);
}
/*  hover */
.x-recent-posts .has-post-thumbnail .x-recent-posts-img:hover:after {
    opacity: 0.5 !important;
    background: red;
}

You can edit the properties and values in the sample code. Please just note though that we do not have customization support. In case you need further customization or the sample code causes issues in your site, you’ll need to forward that to a third-party developer.

Otherwise, I’d recommend that you learn CSS from sites like http://w3schools.com/ so you can play around with the property and values.

Hope that helps.

[Smallman]

Thanks so much - Was really struggling to find the right tags.

[rad]

Glad it’s working now and you’re most welcome!