Portfolio grid: Change image hover overlay

[sandra Broedner]

Right now the portfolio grid has a black/dark overlay hover effect. I need to change the opacity and background colour – or even set it to transparent. Could you tell me where and how I could do this?

[Maria Do]

Hi sandra Broedner

I hope you are well today and thanks for asking the question.

About your question: no available option for this request, that is default hover style of portfolio, so if you want to change it you need to add custom css code for your site. you need to have the knowledge about CSS language to do next custom.

You can use Custom CSS option in theme options and don’t forget enbable “Dev Mode” option:

http://prntscr.com/h74z8h

http://prntscr.com/h74zni

Hope that helps!

[sandra Broedner]

Hi Sen Do Thi,

Thank you, I figured it out without knowing CSS codes. At Custom CSS needs to be entered: div.cms-portfolio-item .portfolio-item-inner:hover .port-img-overlay:before { background: rgb(16, 16, 16, 0.1); } (->the orgiginal occupancy setting is 0.85 which I changed to 0.1). It also works with disabled “Dev Mode”.

Sandra

[Maria Do]

Yes I’m glad to head that!

[Author]

Posts