Creating a hover alternative on touchscreens
While hover effects look cool for mouse or trackpad users, they’re confusing and ineffective on touchscreens. This blog explains how I created a hover effect alternative for touchscreens.
On this site, erica.tech, there is a section to display some of my portfolio pieces. In this portfolio section, there is a screenshot of the portfolio piece and a hover effect, which reveals two buttons, “learn more” and “visit the site”. This hover effect was part of the Bootstrap theme I used.
The portfolio image default
The portfolio image on hover
Looks cool on your desktop, right? But as we all know, hover effects don’t work on touch devices. While a non-touchscreen user gets a hover effect with an indication of what to do next, a touchscreen user has no indication and, thus, no idea what to do.
The portfolio image on touchscreen/mobile shows no indication for the user
By default, the overlay is set to
opacity: 0; (see CSS line 9). On hover, the overlay is set to
opacity: 1;(see CSS line 18). Therefore, the overlay shows on hover.
Create a layer under
.portfolio-box-question(HTML lines 3-5). You can place it “under” by setting
z-index: 1;(CSS line 24) and set
z-index: 2;(CSS line 14)
Insert a glyphicon (HTML line 4) with a question mark to indicate to the user that there’s something that needs clicking/touching/hovering. Now this
.portfolio-box-questionis visible by default, because it sits under the
.portfolio-box-caption, which is set to
.portfolio-box-captionbecomes visible by setting
opacity: 1;. This will reveal the description and buttons which guide the user.
The new look
This stays mostly the same. The big difference is the question mark in the center of the image. I included this on non-touchscreens for two reasons. 1. So that the non-touchscreen user also has some cue that they need to hover, just in case they avoid the image entirely. 2. It’s easier than creating a totally different display for non-touchscreens.
The first image shows the default and the second image shows the hover.
The first image shows the default look on touchscreen. Now the user knows they need to click. The second image shows what happens when the user clicks. The overlay becomes visible. Now the user can decide where they want to go.
This was a fun little project and I’m glad I figured out how to do it. Thanks for reading this far! See you later!