Exploring Enhanced Hover States with CSS Media Queries

Setting hover states with media queries

@media screen and (min-width: 991px)

In web design, creating hover states for clickable elements is a must and a best practice. A common way to achieve this is to use CSS media queries to set hover states. But even using this approach, we can stumble upon pitfalls, in Webflow too. One common issue is that people use the max-width media query to set hover states, and Webflow does to,- tablet breakpoint starts on 991px width.  But we cannot assume that the screens of all touch devices are not wider than 991px, and besides that, we shouldn't always forget to turn off the hover state starting from the tablet breakpoint in Webflow. This is where the hover media query comes in handy.

‍

@media hover

One way to create a dynamic web design is by using the hover media query. This instructs the browser to apply styling only if hover states are supported on the device. Also, we can also write styles for 'non-hover' situations. By adopting this approach, we future-proof our hover states for an ever-expanding array of touchscreen devices. This ensures that our hover effects will continue to function even as new devices with different screen sizes emerge. By taking this forward-looking approach, we can ensure that our web design remains relevant and accessible to users on a wide range of devices for years to come.

To clarify, here is a short example

‍

In this example I'm using 2 additional text elements to achieve the spin text effect. With the following CSS I tell the browser to apply transform to the text elements only where hover is supported.

 @media screen and (hover:hover) {
    .button-wrap:hover .button-text {
      transform: translateY(-100%);
    }
	}

‍

Hope this was helpful for you! And here is a link to documentation