[LearningParticipant]

When someone goes to select the post they wish to read the post image will grey out and show a link icon.
http://prntscr.com/7sslyp

We would like to remove the hover effect or be allowed to add a custom image and icon.

How would we do this?

Thanks (again)

[LearningParticipant]

This reply has been marked as private.

[DarshanaModerator]

Hi there,

Thanks for writing in! Please try adding the following CSS rules into your Customizer, Custom > CSS area.

.home a.entry-thumb:hover img {
    opacity: 1;
}

.home a.entry-thumb:hover::before {
    opacity: 0;
}

Hope that helps.

[LearningParticipant]

Thanks for the speedy reply.

That worked like a charm! One more question… What if we wanted to add our own effect.

How would we do that?

[Paul RModerator]

Hi,

Regretfully, at this time I am not entirely certain what it is you would like to accomplish based on the information given in your post. If you wouldn’t mind providing us with a little more clarification on what it is you’re wanting to do (a link to a similar example site would be very helpful, or perhaps some screenshots), we’ll be happy to provide you with a response once we have a better understanding of the situation.

[LearningParticipant]

We would like to create a custom hover image and use a different hover icon over the blog post image. You just provided us code to make these transparent but if we wanted them to show but wanted custom hover items to display is that possible?

Example: Could we make the grey hover image red or could it say “read more” if we wanted it too.

2nd example: Could we make the link icon our own custom icon or a different X icon.

[ThaiModerator]

Hi There,

Please try following CSS:

#1] Could we make the grey hover image red or could it say “read more” if we wanted it too.

.home a.entry-thumb {
    background-color: red !important;
}
.home a.entry-thumb::before {
  content: "Read More";
  color: #fff;
  font-size: 24px;
  width: auto;
  margin-left: -50px;
}
.home a.entry-thumb:hover::before {
    opacity: 1;
}
.home a.entry-thumb:hover img {
    opacity: 0.15;
}

#2] Could we make the link icon our own custom icon or a different X icon.

.entry-thumb:before {
content: "\\f00c";
}

The icons list you can check on this link: http://fortawesome.github.io/Font-Awesome/icons/.

Hope it helps.

[LearningParticipant]

Ok thanks very much. The top part worked great but I’m having trouble with the icon.

I found a icon on the link that we would like to use (http://fortawesome.github.io/Font-Awesome/icon/leanpub/)

What’s the exact code I would input to make that icon appear under or above “Read More”

[RupokMember]

Hi There,

Thanks for updating! The code for your icon would be –

.entry-thumb:before {
   content: "\\f212";
}

You can see the UNICODE from the icon page and use it.

Cheers!

[LearningParticipant]

This reply has been marked as private.

[Rue NelModerator]

Hello There,

The icon is not showing because you already have this code:

.home a.entry-thumb::before {
  content: "Read More";
  color: #fff;
  font-size: 24px;
  width: auto;
  margin-left: -50px;
}

Please try replacing the ‘Read More’ with ‘\\f00c’ and you will see icon.

Let us know if this has been helpful to you.

[LearningParticipant]

Ok. So what you’re saying is it’s not possible to have both. Correct?

[LelyModerator]

Hello There,

It is possible, please update above CSS to this:

.home a.entry-thumb::before {
  content: "\\f212  Read More";
  color: #fff;
  font-size: 24px;
  width: auto;
  margin-left: -50px;
}

Hope this helps.

[LearningParticipant]

Worked great. Thank you very much

[John EzraMember]

You’re most welcome!

[Author]

Posts