Image gallery with hover effects

[harry_ord]

Hello

 

I want to learn to do more stuff like in this Wordpress theme:

https://www.anchour.com/

After the video and the heading with white background there's a section with pictures, whenever you hover over a picture they get dark and some text appear on them. How can i do this? i know i can do something with the :hover pseudo-class and put some style there to get the picture darker, but... how can i make text that wasn't there in the first place appear?

[Ingolme]

I'm not seeing any text appear, all the text is already visible from the start.

 

If you want text to appear you can have an element with opacity: 0 and change the opacity to 1 to make it visible.

[harry_ord]

Oh, yeah, opacity, that would do!

Look there is text appearing:

-In the div with the word "logofolio" written in it you can see the word "design" at the bottom when you hover over it.
-When you hover over the "broken egg" one you can see the words "design", "web" and "video" appearing at the bottom-left corner.

-The same with Davinci.

[Ingolme]

I see it now, they didn't exactly make it easy to find. That's text on the same element as the faded overlay. The element has a background color and text in it and it just changes its opacity to 80% when hovered. It's stretched to take up all the space within its container.