How can I create an image overlay fade on my images
-
how can i make this effect for the images on my website
https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_image_overlay_fade
The blog I need help with is: (visible only to logged in users)
-
Hi @bennyvillarreal,
Are you trying to do this for all images throughout the whole site or just the Photo Gallery Page?
On the Photo Gallery Page you might be able to adapt the code for each of the photos on that page.
You will also have to add the styles into the Custom CSS area (requires a Premium or Business Plan).
This should get you started. lmk what else you will need.
:)
arlen -
Are there guidelines for people like myself who would like to help others out in the forums?
Thank you.
-
-
@hawaiiwp Thank you for asking. :) If you look at the front page of the forums, besides the sticky posts at the top of the forums that @otpidusprime mentioned, there is also an explanation of the purpose of each forum under the forum name. There is also a general support guide re volunteers available here: https://en.support.wordpress.com/wordpress-com-volunteers/
If you are just getting started, you may want to tailgate any of our active and knowledgeable forum volunteers to get a “feel” for what we do. Feel free to tailgate me if you wish.
Do note that while there are many repeat questions posted in the forums, it is better to develop your own voice and answer from your own knowledge rather than using someone else’s reply. If you do reply quoting another volunteer’s answer, please give credit to that volunteer and link back to where you found the reply.
Again, thanks for asking and @bennyvillarreal apologies for hijacking your forum thread, even though it is for a good cause. :)
-
-
Hi @bennyvillarreal, are you wanting to do this to the images in your portfolios, like Landscapes, Family and Animals? Are you wanting to do it to the gallery images on those pages?
On images, not in galleries, I think HTML and CSS could be added to provide an effect like that, but on images shown in a Gallery, I’m not sure.
If you can let me know where you wish to do this, I can see what I can do.
-
Yes, I’m looking to do this to the images on my portfolios page like Landscapes, Family and Animals. Thank you!
-
-
Hi, the photo galleries such as on your Landscapes page, go to Customize > CSS, delete all the informational text in that window, and paste in the following custom CSS and see what you think. You can adjust the 0.7 opacity and also the 0.3s (0.3 second) transition time as desired.
.tiled-gallery-item img { opacity: 0.7; transition: opacity 0.3s ease-in-out; } .tiled-gallery-item img:hover { opacity: 1; } -
Thank you thesacredpath, that worked for the galleries images but I was actually hoping to have that effect on the stand alone images. Please let me know if there is a way to do that.
I really appreciate all the help! -
So if you look at the site now, I have the effect I’m looking for on the image on the home page but for some reason the hover area is much large than the image itself which is causing problems once I start inserting multiple images. I want each image to have it’s own overlay with different text but the oversized hover area is messing up what I’m trying to do.
-
@bennyvillarreal: Were you able to sort this out for your individual images? I see the effect on your front page today.
Let us know if you still need assistance.
- The topic ‘How can I create an image overlay fade on my images’ is closed to new replies.
WordPress.com Forums 