The Customizr theme comes out of the box with a reveal effect when hovering the images of the featured pages and the post thumbnails. If for some reasons, you need to disable this effect, here’s a quick snippets.
This effect uses a CSS3 transform property called scale. Just set it to a value of 1 and it will be disabled.
You can either copy the following code in the Custom CSS section of the customizer or in the style.css file of your child theme.
.widget-front.hover .round-div, article.hover .round-div {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
}
I hope this will help and your feedbacks are always welcome!
6 thoughts on “Disable the reveal hover effect on images in Customizr”
Hi! I was able to disable the effect. Although, I would like to show the images completely inside the circle. Or, keeping the size when hovered.
thanks!
hello, can you help me? I’m using blogger. How to disable hover only on image header ?
Hi Biha, our developer team tries to handle technical requests for the Customizr free theme in the support forum, would you mind asking your question there ?
https://wordpress.org/support/theme/customizr
Thanks 🙂
i have used your method above to remove the reveal effect for mobile devcies. but it leaves the circular collar
Can you please tell me how to remove the circular boundary so i can see the whole image,
i used
.round-div {dsiplay:none;}but then the images are not links as it is the round-div class div that has the link anchor
found a work around on a nother post on this site by Dave Bardell
http://www.presscustomizr.com/snippet/featured-pages-remove-white-squares-zoom/
.widget-front.hover .round-div, .widget-front .round-div { border-color: transparent; }make the collar transparent, i thought of that but would rather remove it
Hi Anthony, check out this snippet : http://www.presscustomizr.com/snippet/featured-images-squared-instead-of-rounded-in-customizr/
Hope this will help you, cheers