HTML for Image Hover Zoom Effect?

[oytamuah]

If I want to post an image somewhere on the homepage how do I make it so there is a slight zoom effect when user hovers over it. I noticed the featured pics of the blog posts do this automatically but have not been able to figure out how to do it outside this. I tried <img itemprop="image" src="http://site.com/pic.jpg" /> but couldnt get it to work.

[Kyle – SUPPORT]

The css for it is:

.recent-post figure:hover img {
  transform: scale(1.2);
}

– Kyle

[oytamuah]

Could you give an HTML code with inline CSS?

[Kyle – SUPPORT]

Hi

It’s not possible to do inline because it needs to :hover which you can’t do inline

– Kyle

[oytamuah]

Hi is it not possible by wrapping the image around the css class you mentioned? e.g: <div class=”..”></div> ? Not sure I understand how to insert a zoomable picture in a HTML area still..sorry, not very good with CSS.

[Kyle – SUPPORT]

No unfortunately not, is there a reason you want to do it inline instead of using the code I gave you?

– Kyle

[oytamuah]

How would the oode you gave me allow me to have a zoomable picture on a standard WP page? The CSS applies to Recent Posts as far as I can see

[Kyle – SUPPORT]

I was just providing you with the property that made it work, which can be applied to other images, if they are contained within a certain div. Do you want to use the effect for the image page builder asset?

– Kyle

[oytamuah]

The images would be on a sidebar in the homepage – they are inside the Swift Page Builder -> Raw HTML box.

[Kyle – SUPPORT]

Please could you paste the content inside the raw html box so that I can try and provide css to make the hover apply?

– Kyle

[Barq™]

Hi Oytamuah,

Since I just finished a similar effect for my own website, I like to share it with you.
To recreate the effect you want you need to do the following things:
1. Make use of the pagebuilder and create 3 1/3 ‘Text area’s’.
2. Go to the HTML tab and add the following HTML in it: (don’t forget to set your own image)

<div class="service-home-wrapper">
<div class="service-home-img">
<a href="#"><img class="alignnone size-full wp-image-841" src="http://www.barbecue-exclusief.nl/shop/wp-content/uploads/2014/03/weber-producten.jpg" alt="weber-grill-academy" width="370" height="200" /></a>
</div>
<div class="service-home-text"><h4><a href="#">Text here</a></h4></div>
</div>

That creates the image and a text underneath it (you can remove that text if you want by deleting: <div class=”services-home-text”><h4>Text here</h4></div> )

3. You add those for the next 2 Text area’s
4. Go to you style.css and add the following styles:

.service-home-wrapper {
	width:100%;
}

.service-home-img {
	max-width:370px;
	width:100%;
}

div.service-home-img
{
	width: 100%;
	height: 100%;
	overflow: hidden;
	position: relative;
	transition: all 1s;
	-moz-transition: all 1s;
	-webkit-transition: all 1s;
	-o-transition: all 1s;
}

div.service-home-img:hover
{
	-webkit-box-shadow:  0px 0px 15px 2px rgba(0, 0, 0, 0.3);
	box-shadow:  0px 0px 15px 2px rgba(0, 0, 0, 0.3);
}

div.service-home-img > a img
{
	width: 100%;
	height: auto;
	transition: all 0.3s ease-in-out 0s;
	-moz-transition: all 0.3s ease-in-out 0s;
	-webkit-transition: all 0.3s ease-in-out 0s;
	-o-transition: all 0.3s ease-in-out 0s;
}

div.service-home-img:hover > a img
{
	transform: scale(1.2);
	-ms-transform: scale(1.2);
	-webkit-transform: scale(1.2);
	-o-transform: scale(1.2);
	-moz-transform: scale(1.2);
}

.service-home-text {

}

Now you have the same effect.

End result can be seen here: http://www.barbecue-exclusief.nl/shop (underneath the slider)

Cheers,

Stan.

[Kyle – SUPPORT]

Appreciate the help @barq

Let me know if it works oytamuah

– Kyle

[Barq™]

I edited my post with the end result (at the end of the post)

[oytamuah]

Barq your site looks really great, that is indeed the look I’m going for. Will try this out, thanks alot to you both!

[Barq™]

No problem and thanks for the compliment.
If you have any question regarding to this issue, don’t hesitate to ask

P.S. The page I’m working on is a work in progress