Snippets

Snippet: How To Display Overlays On Mobile Under The Image

  • Updated:

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;
	}
}
Learn how to add custom CSS to your site.
Back To Top