Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • May 29, 2014 at 7:50 pm #271967
    josephgut

    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

    May 29, 2014 at 8:01 pm #271973
    Yigit

    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

    May 29, 2014 at 8:26 pm #271996
    josephgut

    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

    May 29, 2014 at 8:32 pm #272001
    Yigit

    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

    November 22, 2014 at 2:18 pm #355884
    friendlier
    This reply has been marked as private.
    November 24, 2014 at 9:44 pm #357137
    Andy

    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 10 years, 11 months ago by Andy.
    November 24, 2014 at 10:50 pm #357188
    friendlier

    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

    November 26, 2014 at 2:02 am #358098
    friendlier
    This reply has been marked as private.
    November 28, 2014 at 12:06 am #359254
    Josue

    Hi!

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

    Best regards,
    Josue

    November 28, 2014 at 1:20 am #359310
    friendlier
    This reply has been marked as private.
    November 28, 2014 at 2:31 am #359363
    Josue

    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

    November 28, 2014 at 3:31 pm #359581
    friendlier

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

    Thanks!

    Simon

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