Hi there,
On the page in the link below I have used pictures as buttons and I would like to jump to another part of the page using a link with, for example, #video like in the left picture.
– I would like to ONLY have a hover effect that changes the size like the one on the right, but this only works on pics that have NO link behind it. The left and middle picture have links like #video to scroll to another part of the page, but then the default hover effect is used (white square and green circle) on top of the change in size.
– Can the buttons go SMALLER instead of bigger on hover, otherwise the picture gets cut off at the edges in this 1/3 column width.
BTW: When I use 1/2 columns that doesn’t happens, why is that?
Thanks!
Hey vossenm!
Thank you for using Enfold.
1/) Do you want to remove the hover effect? Please add this in the Quick CSS field:
span.image-overlay.overlay-type-extern {
display: none !important;
}
Turn on the custom css class field if you want to apply this on specific elements: http://kriesi.at/documentation/enfold/turn-on-custom-css-field-for-all-alb-elements/
2.) Use this to decrease the size of the image on hover:
.av-hover-grow:hover img {
-webkit-transform: scale(.8);
transform: scale(.8);
}
Regards,
Ismael
Thank you very much, that worked great!
Marcel
Hey!
Glad we got it short out!
Please let us know if we can help you with anything else, just open a new ticket for us.
Regards,
Basilis