[Resolved] Sections bg-image opacity

[Jamal]

Hi again,

I would like to have a hover effect on sections background images so as to decrease image opacity on hover. Would appreciate any help,thanks 🙂

[Roberto Enrique]

Unfortunately you can not modify opacity of section backgrounds without affecting all child elements (everything inside the section)

You can have a look here to see if you can implement some sort of workaround:
https://scotch.io/tutorials/how-to-change-a-css-background-images-opacity

[Jamal]

Aa thanks for the reply,i will play around with it and see how it goes.

In the meantime let me explain better what i wanted to achieve. I have some text on the sections that has a background image with lots of colors. Since i cant chose a good text color to highlight the text better,i would like for the text to be more visible when i hover over that section. Is this doable?

Thanks a lot !

[Roberto Enrique]

Everything is doable.
Can you send me your link so i can look at it?

[Jamal]

I like that attitude that everything is doable,wish i knew to code as well 🙂

Should i send you the link through hello@artomultiplo.eu ?

[Roberto Enrique]

Send it, but I’ll answer you here.

[Jamal]

Did you figure it out? Thanks

[Roberto Enrique]

Why don’t you just make the images darker and full width?
You can also make the titles in a heavier (bolder) font weight so they display better.
For the little text (normal paragraphs) inside the sections you can chose to do them in something like h3, then you make a white normal section with the long text bellow.
Something like this, may be more easy to read:

View post on imgur.com

[Roberto Enrique]

So nice the oEmbeds here on the forum!

[Jamal]

This looks awesome,thank you very much. Please share with me how you achieved this,do i have to make the images darker by myself or can i achieve that with a code (lazy fellow here 🙂 )

This is super great,really appreciate it.

[Roberto Enrique]

You don’t have to touch any code to arrive to that result, everything is already available inside sections add-on.

I think that the only thing that you have to install, in case you don’t know how to write html is this: https://wordpress.org/plugins/lightweight-grid-columns/
for the columns in the second and latest section.

For the darker images, that’s something really easy to accomplish with photoshop, gimp or even https://pixlr.com/editor/

[Tom]

You’re awesome, Roberto! 🙂

[Roberto Enrique]

🙂

[Jamal]

Thanks very much once again Roberto,you have been of immense help. Tom gets a coffee on your behalf.

[Roberto Enrique]

Awesome, you’re doing the right thing!
Please share your link when you finish your website 🙂

[Author]

Posts