Thumbnails mouseover transition
-
Hello !
I'm trying to adjust the speed of the transition between the project thumbnail image and the project thumbnail image mouseover.
I tried to modify the css using transition properties (like transition duration), but it don't works.
I probably didn't find the good selector on CSS...I tried on .mo_thumb entries for exemple but without success...
Thank you ! -
Dear @cantoua
I will check with Armin.Just a moment.
Best!
Marius
-
hey Aurélien,
it worked for me by replaying the lines 499 to about 516 of frontend.style.css with:
".no-touchdevice .thumb.has-mouseover-img .ph img:first-child {
opacity: 1 !important;}.no-touchdevice .thumb.has-mouseover-img:hover .ph img:first-child {
opacity: 1 !important;}.no-touchdevice .thumb.has-mouseover-img:hover .ph img.mo_thumb {
opacity: 1 !important;}.touchdevice .thumb.has-mouseover-img.hover .ph img:first-child {
opacity: 0 !important; }.touchdevice .thumb.has-mouseover-img.hover .ph img.mo_thumb {
opacity: 1 !important;}.mo_thumb {
z-index: 1;
-o-object-fit: cover;
object-fit: cover;
opacity: 0 !important; }.mo_thumb:hover img {
transition: opacity 300ms ease;
-webkit-transition: opacity 300ms ease;
-o-transition: opacity 300ms ease;
}" -
Dear @svenro
great! Well done!Dear @cantoua let us know if that worked for you as well.
Best!
Marius
-
@mariusjopen hi! I want to add this to my portfolio but know no css. Would you be able to help me? I'm happy to pay for your work of course.
Before you post:
- When using a WordPress Cache plugin, disable it or clear your cache.
- Update Lay Theme and all Lay Theme Addons
- Disable all Plugins
- Go to Lay Options → Custom CSS & HTML, click "Turn Off All Custom Code", click "Save Changes"
This often solves issues you might run into
When you post:
- Post a link to where the problem is
- Does the problem happen on Chrome, Firefox, Safari or iPhone or Android?
- If the problem is difficult to explain, post screenshots / link to a video to explain it