Edit onmousever overlay on blog archive post featured images

[Brent_St]

Hi,

As you an see on https://dev.cannalifebotanicals.ca/category/different-uses/ when mousing over an image it darkens and has the hyperlinked icon.

Is there a way i can edit the opacity and the icon that is used here?

thanks

Brent

[Prasant]

Hello @Brent-St,

Thanks for asking.

Please add following CSS Pro > Theme Options > CSS:

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

.entry-featured:hover a {
    background-color: #402a5f !important;
    opacity: 0.7;
}

You can change icon code \f005 as per requirement. You can get the list of font awesome icon codes from following source. http://astronautweb.co/snippet/font-awesome/

If you would like to learn CSS, I am sharing few resources that you take a look to get started with CSS and an interesting tool that you can use to speed up the development process.

I recommend you to watch following video that will help you to get started with CSS.

https://www.youtube.com/watch?v=MFR4WXiLzpc

Sometimes it can get a bit difficult to find out the right selector to be able to write the required CSS codes. A handy tool that can help you in this is Google Chrome dev tools. I am sharing the resource that you can refer to get started with dev tools.

https://developers.google.com/web/tools/chrome-devtools/css/

https://developers.google.com/web/tools/chrome-devtools/

https://www.youtube.com/watch?v=tP_kXBJWPhQ&t=200s

Thanks.

[Brent_St]

Thanks for the info. that works perfectly.

I wish i had time to learn CSS properly. 60 hour weeks don;t leave much room for learning new skills.

[ruenel]

You’re welcome!
Thanks for letting us know that it has worked for you.