How to Add Inline Image Zoom to Posts With CSS

How To  Tutorials  Last Updated: Time to Read: 1 minute

The Layers post styling will restrict images in your content to a maximum of 100% the width of the post container. This is pretty standard practice and keeps large images from overflowing into your sidebars or becoming oddly distorted.

To demonstrate, this image is 1024px wide, but is constrained to 671px or 98% of the post container, or invisible box that gives the post content its structure.

howitworks

There may be several theming and layout choices that lend themselves to allowing images to be wider than the content itself. We see this often on magazine sites such as the New Yorker, Medium or Guardian features. In most cases these layouts feature larger fonts and centered content without sidebars. Following is a quick trick for how you can add styling to the CSS panel in the Customizer, or in your child theme to allow your images to break out of the default confines, either always, or via an elegant hover animation.

First, take a look at the default CSS by right-clicking an image in a post and using your Browser Inspector to view the CSS.

To override the 98% rule, simply give it a pixel value:

The above example will affect all templates that use the .story  wrapper, including default pages. If you want only posts to use this behavior, or a custom post type added through a plugin, you must append that post’s body class. This example targets single posts only:

The following keeps the image scaled but allows it to expand on hover. To do this, we add the max-width override to the hover state, and add a CSS3 transition effect to the image. This is a great alternative to lightboxes but still requires your site to have room on the right side of the layout at all screen sizes so be sure to test your site’s responsive views and add mobile CSS where needed:

Try it:

howitworks

Note

This will not work for Featured Images, which are scaled algorithmically by WordPress to fit the template.