Snippets: How To Display Overlays On Mobile Under The Image

Various image overlays display on hover, however, on mobile devices there isn't any "hover" affect. That's ok, you can actually use some custom CSS if you want to have the overlays display on mobile under the image. Below is an example for the "Title with Excerpt" overlay but you can use the same concept for other overlay styles and of course you can change the media query so the CSS takes affect at the desired screen-size.

/* Display Overlay with title and excerpt on hover below the image for all screen-sizes 959px wide and under */
@media only screen and (max-width: 959px) {
	.overlay-title-excerpt-hover {
		display: block;
		visibility: visible;
		opacity: 1;
		position: static;
		top: auto;
		left: auto;
	}
	.overlay-title-excerpt-hover .overlay-table-cell,
	.overlay-title-excerpt-hover .overlay-table-cell:hover {
		padding: 20px 0 0;
		transform: scale( 1 );
		text-decoration: none;
	}
}
All CSS snippets should be added via a child theme's style.css file or using the built-in Custom CSS panel.