Recent Post hover effect

Support
#1

Hi. In this site: http://fluent.group/ under the section titled COMMUNITY & EVENTS, there are 3 Recent Posts elements. If you hover over each one, an icon shows up. How can one:

  1. Get rid of the icon and insert text?

  2. Instead of the blue background on hover, use an image?

#2

Hello @Multiplier,

Thanks for writing in!

Please add following CSS to make the change you ar looking for in recent post:

.x-recent-posts .format-standard .x-recent-posts-img:before{
content:"Text";
}
.x-recent-posts .x-recent-posts-img:after{
background-image: url(enter image source url);
}

Let us know how it goes.

Thanks.

#3

Thanks! With that, here’s what I applied:

.x-recent-posts .format-standard .x-recent-posts-img:before{
content:"+ Read More";
}

How would you recommend that I style the text given that I must edit it this way? For example, I’d like for + Read More to be in one line, smaller, different font, etc.

#4

Hi there,

Please update the code to:

.x-recent-posts .format-standard .x-recent-posts-img:before {
    content: "+ Read More";
    font-size: 1em;
    line-height: 1em;
    display: block;
    width: auto;
    font-family: "Montserrat",sans-serif;
}

Hope this helps.

#5

Hey Jade,

Thanks for your help on that but it’s very difficult to center the text within the box. Any advice on this?

#6

Hello There,

Please update previous code with the following to center align the text:

.x-recent-posts .format-standard .x-recent-posts-img:before {
    content: "+ Read All About It";
    font-size: 1.75em;
    line-height: 1em;
    display: block;
    width: auto;
    font-family: "Montserrat",sans-serif;
    margin: 0 auto;
    left: 30%;
}

Thanks.

1 Like