New Landing How can we help? Themeforest Theme Support Neighborhood HTML for Image Hover Zoom Effect? Reply To: HTML for Image Hover Zoom Effect?

#69411
Barq™
Member
Post count: 57

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.