Notice: This thread is over two years old; the information may be outdated. Please consider creating a new thread if you require free support. If you have an active SiteOrigin Premium license, you can email our premium support desk at [email protected].
Hello Vantage team,
Us again! Hope everything is great on your side. We come again to seek your support in the following subject:
we would like to get a zoom effect when someone hovers on an image, just like the first image in this url: http://designshack.net/tutorialexamples/imagehovers/zoomandpan.html
We are using the following code:
We tried targeting site origin image widget but it did not work so we then tried adding a text widget and using html to place the image, with the pic di, still did not work.
We are targeting the images in the home page of: http://iluminaciondelnoroeste.servicioswebmex.com/
(under the slider)
pic {
height: 300px;
width: 300px;
overflow: hidden;
}
.grow img {
height: 300px;
width: 300px;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
.grow img:hover {
width: 400px;
height: 400px;
}
Hi Jose
Please try this instead
.pic { height: 300px; width: 300px; overflow: hidden; } .grow img { height: 300px; width: 300px; max-width: 400px; -webkit-transition: all 1s ease; -o-transition: all 1 ease; -ms-transition: all 1s ease; -moz-transition: all 1s ease; transition: all 1s ease; } .grow img:hover { height: 400px; width: 400px; }The max-width setting was restraining the image to 300px. Adding a new value to your CSS should fix the issue.
Magus
Hi
Where do I put this code exactly? In attributes in the Widget styles part of page builder or where? Help will be greatly appreciated! Thanks Erica
Hi Erica
We’d like to help you, but can you please start a new thread with your question? We can only offer you the best support possible when you’re the owner of a thread.
Page: New Thread
If you’re a premium user, please be sure to enter your order number so we can properly prioritize your thread.
If you post the link to your new thread here we’ll be happy to take a look ASAP.