Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #271967

    Hi,

    I was wondering if there’s a way to do a Zoom hover effect when you mouse over an image. Basically I want it where when you mouse over an image or banner that you get a slight effect of zooming in a bit into the image and then when you move the mouse away it zooms back out. I’ve seen a few other themes with this neat little feature. I’ve looked in Enfold’s Media Elements and at Image settings, but didn’t see a comparable feature. Is there any way that we can achieve this? Thank you – really enjoy your theme and attention to updates.

    – Joseph

    #271973

    Hey Joseph!

    You can use Masonry Gallery element – http://kriesi.at/themes/enfold/shortcodes/masonry-gallery/
    If you want to use on other images as well, you can point them out and we can provide you custom CSS code

    Best regards,
    Yigit

    #271996

    Hi Yigit,

    That sounds like a good option for a bunch of images. I would like to have two different image banners which would do the effect. So yes, I’d like to know what the CSS code would be that I could use for an image. Thank you!

    – Joseph

    #272001

    Hi!

    Please turn on Custom CSS field for Avia Layout Builder elements – http://kriesi.at/documentation/enfold/turn-on-custom-css-field-for-all-alb-elements/
    and give image elements a custom CSS class then add following code to Quick CSS in Enfold theme options under General Styling tab

    .custom-css-class img:hover {
    -webkit-transform: scale(1.05,1.05);
    -moz-transform: scale(1.05,1.05);
    transform: scale(1.05,1.05);
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out; 
    transition: all 0.5s ease-in-out;
    }

    Best regards,
    Yigit

    #355884
    This reply has been marked as private.
    #357137

    Hey friendlier!

    I cant’t see any code for class=”ourservices” on your website.
    You need to put in this code in Quick CSS:

    .ourservices img:hover {
    -webkit-transform: scale(1.05,1.05);
    -moz-transform: scale(1.05,1.05);
    transform: scale(1.05,1.05);
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out; 
    transition: all 0.5s ease-in-out;
    }
    

    Have you done this?

    Please provide us admin access if it does not work, so we can have a deeper look into your issue. Post it here as a private reply

    Best regards,
    Andy

    • This reply was modified 9 years, 12 months ago by Andy.
    #357188

    Hi Andy ;-)

    Thanks for your reply!

    Yes – I’ve also tried putting it in the child theme’s style.css file and it’s not taking.

    Best

    http://cl.ly/image/2543343h0K2C

    #358098
    This reply has been marked as private.
    #359254

    Hi!

    The link you posted is returning this – http://screencast.com/t/3gatguQDTbV

    Best regards,
    Josue

    #359310
    This reply has been marked as private.
    #359363

    Hey!

    Check it now, i changed the code to this:

    .ourservices .grid-image img{
        -webkit-transition: all 0.5s ease-in-out;
        -moz-transition: all 0.5s ease-in-out; 
        transition: all 0.5s ease-in-out;
    }
    
    .ourservices .grid-image:hover img{
        -webkit-transform: scale(1.05,1.05);
        -moz-transform: scale(1.05,1.05);
        transform: scale(1.05,1.05);
    }

    Regards,
    Josue

    #359581

    Terrific – I’ve copied it to the live site and it works perfectly.

    Thanks!

    Simon

Viewing 12 posts - 1 through 12 (of 12 total)
  • The topic ‘Zoom Hover Effect for Images?’ is closed to new replies.