Hover over image effect

• 

  petitpoisvideos · Member · Oct 2, 2015 at 11:00 am

  • Copy link
  • Add topic to favorites

  I found this code somewhere:

  .zoom_img img{
  margin:50px;
  height:100px;
  width:100px;
  -moz-transition:-moz-transform 0.5s ease-in;
  -webkit-transition:-webkit-transform 0.5s ease-in;
  -o-transition:-o-transform 0.5s ease-in;
  }
  .zoom_img img:hover{
  -moz-transform:scale(2);
  -webkit-transform:scale(2);
  -o-transform:scale(2);
  }

  but I suspect it is not quite right?
  I was trying to see if I could have images zoom up/out and back when hover over. There’s a lot of different codes to be found and I have tried a couple. It’s not a big deal, but I thought I would try it out. This code doesn’t seem to work. Ideas?

  The blog I need help with is: (visible only to logged in users)

• 

  pedger · Member · Oct 2, 2015 at 12:31 pm

  • Copy link

  Hi ninapetitpoisvideo

  The code above works for images that are inside .zoom_img class elements, which you probably don’t have in WordPress.

  I’m not sure if it will work, but try the following code on your Customizer >> CSS:

  .default-wrapper img:hover{
      -moz-transform:scale(2);
      -webkit-transform:scale(2);
      -o-transform:scale(2);
  }

  You will have to have a Premium plan in order for this to work, Do you already have it?

  hope that helps

• 

  petitpoisvideos · Member · Oct 2, 2015 at 12:51 pm

  • Copy link

  Oh – I’m both impressed and thankful to you guys in here!

  Premium; yes.
  And this worked!
  Thank you!

  ( I guess the value (2) is adjustable – if I should want to change…)

• 

  pedger · Member · Oct 2, 2015 at 12:54 pm

  • Copy link

  Hi

  Great that it worked!

  Yes, the value 2 is adjustable. It is probably scaling the images to 2 times the original size. You can insert something as 1.5 to try.

  I would strongly recommend you to check if the zoom effect is only working on the images you want, and not on all images on your blog :)

  I ‘m happy to help!
  cheers