Jump to content

Image gallery with hover effects


harry_ord
 Share

Recommended Posts

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?

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...