Fade hover effect for images
under review
V
Vladimir Poskrebyshev
I know you can make rollover images by uploading two images. I have another idea which might be useful if you don't have time to produce separate images but still want to add some interactiveness to your images with links: Add fade effect on hover. I think it would make sense in case when your picture:
1) Does have an assigned link
2) Do not have any rollover images
It makes sense to allow activating this option once users add links to images. It adds interactiveness and shows email subscribers that this image is clickable which increases click rates.
.fade{ transition: 0.5s !important; }
.fade:hover{ transition: 0.5s !important; opacity: 0.8 !important;}
Transition time and opacity level can be set as variable. So in the editor it will look like this:
1) Added some link to the picture
2) Switcher appears Image fade hover effect
3) If activated, two parameters appear: animation time and Opacity level. I would keep it simple and make both from 0.0 to 1.0 using a + and - controllers
4) If transition is set to 0, effect does not appear in CSS
This setup makes sense to me but you might think differently. For example, maybe it can be added without "has link" limitation, maybe somebody wants to have this effect even when picture is not clickable. But to me it does not make sense. Additionally, there might be some other effect but I only checked behaviour of "fade" in a couple of email clients (Gmail - works correctly, Outlook - does not work. But buttons' hover effect is also not perfect in Outlook).
Opacity: supported by 63% of email clients (https://www.caniemail.com/search/?s=opacity)
Transition: by 21-39% (https://www.caniemail.com/search/?s=transition)
Stripo Team
under review
V
Vladimir Poskrebyshev
Stripo Team Hi! I think there has been a misunderstanding. I suggested the "opposite" of using two images and the rollover effect.
– The idea is not related to the rollover effect. It is a separate feature
– This effect is for a single image only
– On hover it just becomes slightly transparent. It gives an opportunity to use this effect on images with links as an additional effect to show that this image is clickable + increase click rates.
Here is an example, Litmus uses this effect on images with links in all their emails: https://page.litmus.com/index.php/email/emailWebview?email=ODY0LVZQWi0xMzEAAAGYVQnxRMfWrk-DBtqXEOnfBis5CDeoPqmpwyzB6vDP2V_LAuDrueYVuaxJzzcLulLj4T3-qGhnh4uyW_fG-juZOi7GY0M3fIiLTw
Stripo Team
Hi, Vladimir!
We want to let you know that the transition does not work on the display: none/block property, which we use to hide and show images during the rollover effect.
M
Marina Kryvenets
Hello, Vladimir!
Thank you for your idea and support in enhancing the platform.
I've forwarded your request to the development team.
We appreciate your participation!