hover over effect on picture

veganessatvlc · Member · Jan 21, 2016 at 5:43 pm
Copy link

Add topic to favorites
I would like to add an image with a ‘graphic’ warning so that the image is not displayed unless you hover over it. Is there a way to do this for the image?

The blog I need help with is: (visible only to logged in users)
timethief · Member · Jan 21, 2016 at 8:22 pm
Copy link
Duplicate. Already answered here https://en.forums.wordpress.com/topic/hover-over-effect-on-graphic-image?replies=4#post-2543983 Post there only and do not create or post into more than one thread on any single issue please.
timethief · Member · Jan 21, 2016 at 8:23 pm
Copy link
YIKES! That was an error on my part. Ignore what I posted (red faced).

I am so sorry. :(

Please be patient while waiting for another Volunteer or Staff to respond.
veganessatvlc · Member · Jan 21, 2016 at 10:29 pm
Copy link
Okay, thanks.
timethief · Member · Jan 21, 2016 at 10:35 pm
Copy link
Thanks for being gracious about my error. I do appreciate it.
veganessatvlc · Member · Jan 21, 2016 at 10:36 pm
Copy link
No worries!
thesacredpath · Member · Jan 26, 2016 at 6:38 pm
Copy link
Hi there, we can set opacities on an image and then set a transition to make the image fade in and fade out.
```
.wp-image-210 {
    opacity: 0;
    transition: opacity 0.3s ease-out;
}
.wp-image-210:hover {
    opacity: 1;
    transition: opacity 0.3s ease-in;
}
```
As an example, the above eases in and eases out the image in your Measure of Mettle post on your main page. This would require the WordPress.com Premium Plan upgrade, which includes Custom Design and the ability to add custom CSS.

You can try out and preview custom CSS before you buy as explained here.
veganessatvlc · Member · Jan 26, 2016 at 7:42 pm
Copy link
Thank you! I”ll check out the premium plan.
thesacredpath · Member · Jan 28, 2016 at 2:16 am
Copy link
You are welcome.

No items found.