Adjusting / Customize hover effects of images

[oliverr]

Hey guys,
I do not like the hover-effects, when a picture is hovered. I tried my best to find information about it in the documentation, but I couldn’t find any information about that issue.
I want to change the style of the hover/overlay-effect for pictures.

Can this be adjusted anywhere in the backend?

Thanks!

Attachments:

You must be logged in to view attached files.

[David Martin – Support]

Hi,

The color can be adjusted for the overlay fade.

Can you be specific as to what you want to change?

– David.

[oliverr]

Hey,
please hover the first thumb (spiderman) to see my goal:
https://dl.dropboxusercontent.com/u/397267/test/test.html

Changes:
– No gradient
– No picture-zoom
– No animation
– Title of project on thumb plus option to make project-title white or black (depends on thumb’s bg-color)

[Rui Guerreiro – SUPPORT]

Hi,

Can you add this one for now. I’m trying to find a solution for the others.

figure.animated-overlay figcaption {
    background: rgba(0, 0, 0, 0.4)!important;
}

-Rui

[oliverr]

It would be also nice to have the possibilty to change the color of the hover-effect (instead of grey) like you guys did it on this page: http://www.swiftideas.com/themes/

[David Martin – Support]

Hi,

Yes you can change the opacity of the gradient in Theme Options => General => Thumbnail Options.

The color is set: Customizer => Color – UI Elements => Thumb Hover Overlay Background Color.

Thanks.

[oliverr]

Hi,

Can you add this one for now. I’m trying to find a solution for the others.

Hey, did you find a solution?

[David Martin – Support]

Hi,

Please remove the gradient by setting both options here to 100.

Theme Options => General => Thumbnail Options => Hover Overlay Opacity (Top)

Thanks.

[oliverr]

Hey,
I’m still looking for help to realize this:
https://dl.dropboxusercontent.com/u/397267/test/test.html

Changes:
[SOLVED] No gradient
– No picture-zoom
– No animation
– Title of project on thumb plus option to make project-title white or black (depends on thumb’s bg-color)

Thanks!

[David Martin – Support]

– No picture-zoom: Please use this:

.standard-browser figure.animated-overlay:hover img {
    -webkit-transform: none;
    -moz-transform: none;
    -o-transform: none;
    -ms-transform: none;
    transform: none;
}

– No animation: Please use this:

figure.animated-overlay img {
    transition: none;
    -webkit-transition: none;
    -moz-transition: none;
    -ms-transition: none;
    -o-transition: none;
}
figcaption .thumb-info h4 {
    transform: translate(0);
}

– Title of project on thumb plus option to make project-title white or black (depends on thumb’s bg-color): this is not possible, you would need a developer to implement this for you.

[oliverr]

Hey, this code doesn’t work.
Scroll down to the Gallery to see the animation.

[Kyle – SUPPORT]

Add this:

figcaption .thumb-info-alt > i {
  transform: none;
}

The only thing we can’t stop is the icon animation because it’s an svg

– Kyle