Digital experiences for all disciplines
New Landing › How can we help? › Themeforest Theme Support › Neighborhood › HTML for Image Hover Zoom Effect? › Reply To: HTML for Image Hover Zoom Effect?
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.