how to disable hover (onmouseover) on images - Support | Kriesi.at

Viewing 8 posts - 1 through 8 (of 8 total)

Author

Posts
April 24, 2015 at 1:25 pm #434052

alteba
Participant

Hi,

I have just placed some images in a website or have a content element (blog post) inserted into the website (www.ltena.com). But every time I go over them with the mouse they turn into a white transparent layer with a red circel in it. Can this be disabled in the settings?
If this can not be disabled in the settings, then can it be disabled anywhere else?

I prefer much more the way pictures or images are licked like the masonry gallery on the enfold demo site.
Here the picture ‘grows’ a little when hover.

Can you please help me get this disabled?
Best regards,

Bart Altena

April 24, 2015 at 2:17 pm #434093
Yigit
Keymaster
Hey alteba!

Please add following code to Quick CSS in Enfold theme options under General Styling tab
```
.image-overlay { display: none !important; }
```
Best regards,
Yigit
April 24, 2015 at 2:27 pm #434100

alteba
Participant

Cheers Yigit.

The overla is disabled. Thanks.

Is it much work to enable the same overlay for all pictures (which we just disabled) as in the masonry gallery?
Best regards,

Bart Altena

April 24, 2015 at 2:36 pm #434109
Yigit
Keymaster
Hey!

Please add following code to Quick CSS in Enfold theme options under General Styling tab
```
#main img:hover {
  -webkit-transform: scale(1.05,1.05);
  transform: scale(1.05,1.05);
  transition: all .3s ease-in-out;
  -webkit-transition: all .3s ease-in-out;
}
#main img {   
transition: all .3s ease-in-out;
  -webkit-transition: all .3s ease-in-out;
}
```
Best regards,
Yigit
April 24, 2015 at 2:43 pm #434121

alteba
Participant

Hi Yigit,

You’re fast thanks for that.
Your solution changes indeed al pictures making them a bit bigger on onmouseover.
Unfortunately my sliders also grow bigger on a onmouseover event.
Is it possible to do the transition only when the image contains a link?
So not the sliders. and not the images without a link?

Thanks for the support

Bart

April 24, 2015 at 2:46 pm #434124
Yigit
Keymaster
Hi!

Please try changing the code to following one
```
#main a + img:hover {
  -webkit-transform: scale(1.05,1.05);
  transform: scale(1.05,1.05);
  transition: all .3s ease-in-out;
  -webkit-transition: all .3s ease-in-out;
}
#main a + img {   
transition: all .3s ease-in-out;
  -webkit-transition: all .3s ease-in-out;
}
```
Regards,
Yigit
April 24, 2015 at 3:00 pm #434141

alteba
Participant

Hi Yigit,

thanks again for the quick reply and good support.
Unfortunately the code does not what I want.

I changed into

.image-overlay { display: none !important; }

#main a:hover {
-webkit-transform: scale(1.05,1.05);
transform: scale(1.05,1.05);
transition: all .3s ease-in-out;
-webkit-transition: all .3s ease-in-out;
}
#main a {
transition: all .3s ease-in-out;
-webkit-transition: all .3s ease-in-out;
}

and now it work perfect.
I only hope I don’t break anything.
Cheers

Bart

April 24, 2015 at 3:06 pm #434148

Yigit
Keymaster

Hi!

Glad you figured it out Bart, let us know if you have any other questions :)
Have a nice weekend!

Cheers!
Yigit
Author

Posts

Viewing 8 posts - 1 through 8 (of 8 total)

The topic ‘how to disable hover (onmouseover) on images’ is closed to new replies.