Jump to content
Sign in to follow this  
harry_ord

Image gallery with hover effects

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?

Share this post


Link to post
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.

Share this post


Link to post
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.

Share this post


Link to post
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.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

×
×
  • Create New...