We have the zoom effect for our images when you hover over them. We have added radius corners to our images, but when you zoom over the image the image zooms in and the radius corners disappear. Is it possible to keep the radius corners when someone zooms over the image as well?
Hello!
Please let me know where you have added the radius corners, provide some screenshots and your website link in order to help you efficiently.
A solution for sending a screenshot is this:
Download, capture, send: https://www.techsmith.com/jing-tool.html
After making the screenshot, you will have a link, paste it here.
Thank you!
The site is located here dev.hrmasia.com. Here is a link to the video showing how we made the radius corners in the theme. We also added the custom CSS found on your forum to execute the Zoom on hover. Also included in the video.
We would like for the corners to display radius all the time even on hover with zoom effect if possible.
https://www.screencast.com/t/C7IaLE9SmQDg
Csuom CSS:
/* Image Zoom Effect for all blocks */
.td-module-container:hover .td-thumb-css {
transform: scale3d(1.1, 1.1, 1);
-webkit-transform: scale3d(1.1, 1.1, 1);
border-radius: 20px!important;
}
.td-module-container .td-thumb-css, .td-module-container:hover .td-thumb-css {
transition: transform .5s ease;
}
.td-module-thumb {
overflow: hidden!important;
}
Hello!
Oh, I see. In this case, you should add some CSS:
.td-module-thumb {border-radius: 10px;}
Hope that helps you!
Thank you!
Worked Perfectly. Thank you.
