Made with love by Waldo

Responsive Hover Blocks

A fun way to show off your work is to have a background image, and content which shows up when you hover over the image. This is great until you reach mobile devices such as phones. So you will notice that on Tablet, the hover text shows up over the images. Then on mobile landscape and portrait the text shows up underneath the background images.

Feel free to clone this project, copy and paste this to your own Webflow sites and then you can showcase your work easily.

Project Heading

Duis aute irure dolor in raque porro quisquam est, qui dolorem ipsum quia dolor sit amet, cocteut labore et dolore magnam aliquam quaerat voluptatem.

Project Heading

Duis aute irure dolor in raque porro quisquam est, qui dolorem ipsum quia dolor sit amet, cocteut labore et dolore magnam aliquam quaerat voluptatem.

Project Heading

Duis aute irure dolor in raque porro quisquam est, qui dolorem ipsum quia dolor sit amet, cocteut labore et dolore magnam aliquam quaerat voluptatem.

Structure and instructions

Hover Block element structure:

hover-block__parent

> hover-block__link

> > hover-block__text

> > > heading‍

> > > hover-block__description

Instructions for creating more:

  1. Duplicate the hover-block__parent
  2. Add a combo class to the hover-block__parent element specific to the background image
  3. Change out the background image with the new combo class
  4. Check each break point from desktop ➞ mobile to ensure the background image fits or is moved around as needed on different break points to accommodate the design
  5. Set the hover-block__link class to 100% opacity on desktop to update the heading and text
  6. Set the hover-block__link class back to 0% opacity on desktop to keep the desktop hover experience