Docs

[Andrew]

Hi,

I have recently updated (from 3.0.6) to your latest released version of X (4.6.2) but have encountered a problem when hovering over any x-recent-posts tiles.

The recent-post-img should fade to grey (exactly as the blog posts do), but on the home page (within the x-recent-posts areas) they turn green with a white-square in the middle.

I’m sure it’s a custom CSS issue, but am having trouble locating it. Could you help?

Kind regards
Andrew

[Andrew]

This reply has been marked as private.

[Andrew]

This reply has been marked as private.

[Thai]

Hi There,

Please add the following CSS:

.x-recent-posts .x-recent-posts-img:before {
    display: none;
}
.x-recent-posts .x-recent-posts-img:after {
    background-color: #ddd;
}

Hope it helps 🙂

[Andrew]

Thank you. Nearly fixed, but the background image opacity seems to be twice as faded, compared to the blog page.

Here’s the Custom CSS file in full:

.x-recent-posts .h-recent-posts {
font-size: 24px;
}

.entry-title {
  margin-top: 15px;
}

.entry-wrap.cf  {
  padding-top:25px;
}

.entry-title-portfolio {
font-size: 24px;
margin-top: -15px;
margin-bottom: 5px;
}

.entry-wrap { 
padding: 0px;50px; 
}

.x-icon-facebook-square:before {
color: #8b8b8b;
}
.x-icon-twitter-square:before {
color: #8b8b8b;
}
.x-icon-linkedin-square:before {
color: #8b8b8b;
}

.entry-wrap {
padding: 0px 15px;
}

.x-container-fluid.max.width.offset.cf {
    margin-bottom: 0px;
    //margin-top: 10px;
}

.entry-wrap {
    border: 0px solid #a9a9a9;
    box-shadow: none;
}

.x-social-global {
   text-align: left;
}

.x-navbar .desktop .x-nav > li ul {
    top: 113px;
}

.x-recent-posts a {
  box-shadow: none;
  border: 0px;
  border-radius: 0px;
}

.x-recent-posts .x-recent-posts-img {
    border-radius: 0;
}

.x-recent-posts img {
    border-radius: 0;
}

.x-recent-posts a {
    border: 0 none;
}

.x-recent-posts a:hover .x-recent-posts-img {
    background-color: #ddd;
    opacity: 0.4;
}

.x-recent-posts a:hover img {
	opacity: 0.5;
}

.x-recent-posts .x-recent-posts-img::before {
    background-color: transparent;
    content: "";
}

.entry-thumb a:hover img {
    background-color: #ddd;
    opacity: 0.4;
}

.entry-thumb {
    background-color: #ddd;
}

.entry-thumb::before {
    background-color: #ddd;
    content: "";
}

.x-recent-posts .format-standard .x-recent-posts-img::before {
    background-color: #ddd;
    content: "";
}

.x-recent-posts .x-recent-posts-img {
      background-color: #ddd;
}

.x-recent-posts .x-recent-posts-img:before {
    display: none;
}
.x-recent-posts .x-recent-posts-img:after {
    background-color: #ddd;
}

[Christian]

Please change the opacity value of this code

.x-recent-posts a:hover .x-recent-posts-img {
    background-color: #ddd;
    opacity: 0.4;
}

.x-recent-posts a:hover img {
	opacity: 0.5;
}

to 1. If that doesn’t help, add !important like

.x-recent-posts a:hover .x-recent-posts-img {
    opacity: 1 !important;
}

.x-recent-posts a:hover img {
	opacity: 1 !important;
}

Thanks.

[Andrew]

Fixed! Thank you so much for this help.

[Prasant Rai]

You are most welcome. 🙂

[Author]

Posts