Zoom Box Content Image Sizing / Scaling

ShriverGroup

How can I make the content images on my Homepage Zoom Boxes not scale? Have a look at http://indigopalmevents.com/ - I'd like the content images ("Bespoke Design," "Special Events," and "Flowers") span the width of the Zoom Box images. Thanks, Beaver

Bryan

Go to theme options>global>general and set the style for the image frame.

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

ShriverGroup

Thanks for the response. I tried all of the image frame style options, but no change to the content image size. It looks like the content images (uploaded at 136px x 141px matching the demo images) get scaled to 103.35 x 122.133 - (img.scale-with-grid). I tried uploading larger images, even 3x larger, but they all got scaled. Any other ideas or am I not selecting the correct image frame style option? Thanks, Beaver

dino127

the simplest way : to add a couple of strings to your custom css:

.zoom_box:hover .photo img {    -webkit-transform: none !important;    -moz-transform: none !important;
    -ms-transform: none !important;    -o-transform: none !important;    transform: none !important;}

.zoom_box .photo img {    -webkit-transform: none !important;    -moz-transform: none !important;
    -ms-transform: none !important;    -o-transform: none !important;    transform: none !important;}

and it is much better to add some class in wrapper or zoom-image box, like home_zoom, then css will be:
.home_zoom .zoom_box:hover .photo img 
and  style without !important.

PS: and made the top image more sharp, find the appropriate one at 1920px So good looking content and main image... upps - sorry, just a look )

Bryan

I thought you meant the hoover effect. TO change the size of images go to theme options>blog,portfolio&shop>featured image and set the size there. Remember to read the notice at the botton regarding thumbnail regeneration.

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

ShriverGroup

Thanks for the input, dino127 and Muffin Support. I tried both Dino's custom css and Support's suggestion without any luck. Maybe I'm not explaining my issue very well. On the home page zoom boxes (captioned Bespoke Design, Special Events and Flowers), there is an indigo color and an image (just text) that appears on hover. I want the hover images to be larger (notice that the text that appears on hover is pretty small) so that the text spans most of the "under images" (dining table, wedding girls and flower). Thanks again and thanks, Dino, for the new top image recommendation (I'll hop on that!). Beaver

Bryan

Hi, try this css 

.zoom_box .desc .desc_img img {
    max-width: 40% !important;
   
}

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

ShriverGroup

That's it! Thank you for the help.