Applying hover zoom to image

[entechnico]

Hey there!

Just a quick question. I am trying to apply a hover zoom to an image so that when a visitor hovers over it then it scales up say 10%

I am using the raw element to insert the rows as I need it and say I am using two columns then the code I use is something like below (I built it in cornerstone and then grabbed the code off chrome to use in the raw).

What can I add in there to give this effect?
Have tried some things that i found on the web but because I am not good with code I cannot make it work haha

    <div class="e150-20 x-section">
  
<div class="e150-21 x-container max width">

<div class=“zoom” "e150-22 x-column x-sm x-1-2">

<a class=”e150-23 x-image" href=“IMAGE_LINK”>
<img alt="Image" src=“IMAGE_SOURCE_LINK“>
</a>
<div class="e150-24 x-text">
Available</div>
</div>
<div class="e150-25 x-column x-sm x-1-2">

<a class="e150-26 x-image" href="IMAGE_LINK">
<img alt="Image" src="IMAGE_SOURCE_LINK">
</a>
<div class="e150-27 x-text">
Available</div>
</div></div>
 </div>

[ruenel]

Hello There,

Thanks for writing in!

When you add a custom class, insert only zoom and please do not include any quotes. And the resulting code would just be:

<div class="e150-20 x-section">
  
<div class="e150-21 x-container max width">

<div class="zoom e150-22 x-column x-sm x-1-2">

<a class="e150-23 x-image" href="IMAGE_LINK">
<img alt="Image" src="IMAGE_SOURCE_LINK">
</a>
<div class="e150-24 x-text">
Available</div>
</div>
<div class="zoom e150-25 x-column x-sm x-1-2">

<a class="e150-26 x-image" href="IMAGE_LINK">
<img alt="Image" src="IMAGE_SOURCE_LINK">
</a>
<div class="e150-27 x-text">
Available</div>
</div></div>
 </div>

To apply a css that zoom out or scale up the images by 10%, please add the following CSS code in the X > Theme Options > Global CSS (http://prntscr.com/evui3r)

.zoom a img {
  transition: all 1s ease;
}

.zoom a:hover img {
  transform: scale(1.1);
}

We would loved to know if this has work for you. Thank you.

[entechnico]

Woo,

That has worked really well. thanks heaps for that.

[ruenel]

You’re welcome!
Thanks for letting us know that it has worked for you.