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.

Problem:

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.

Portfolio image default The portfolio image default

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.

Portfolio image device

The portfolio image on touchscreen/mobile shows no indication for the user

Current setup:

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.

HTML:

 1 <div class="portfolio-box">
 2   <img src="images/book_searcher.jpg" class="img-responsive" alt="">
 3   <div class="portfolio-box-caption">
 4     <div class="portfolio-box-caption-content">
 5       <div class="project-category text-faded">
 6         Web app
 7       </div>
 8       <div class="project-name">
 9         Book Searcher
10         <p>Search the NY Times best sellers list and see info and ratings about each book.</p>
11         <p>
12           <a href="/blog/booksearcher" class="btn btn-sm portfolio-button">Learn more</a>
13           <a href="http://booksearcher.erica.tech" class="btn portfolio-button btn-sm">Visit the site</a>
14         </p>
15       </div>
16     </div>
17   </div>
18 </div>

CSS:

 1 .portfolio-box .portfolio-box-caption {
 2     display: block;
 3     position: absolute;
 4     bottom: 0;
 5     width: 100%;
 6     height: 100%;
 7     text-align: center;
 8     color: #fff;
 9     opacity: 0;
10     background: rgba(240,95,64,.9);
11     -webkit-transition: all .35s;
12     -moz-transition: all .35s;
13     transition: all .35s;
14 }
15 
16 .portfolio-box:hover .portfolio-box-caption {
17     opacity: 1;
18 }

Solution:

  1. Create a layer under .portfolio-box-caption called .portfolio-box-question(HTML lines 3-5). You can place it “under” by setting z-index: 1;(CSS line 24) and set .portfolio-box-caption to z-index: 2;(CSS line 14)

  2. 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-question is visible by default, because it sits under the .portfolio-box-caption, which is set to opacity: 0;.

  3. Next we need a JavaScript function. This function will be set for touch screens, so that when a user “touches”, the .portfolio-box-caption becomes visible by setting opacity: 1;. This will reveal the description and buttons which guide the user.

HTML

 1 <div class="portfolio-box">
 2   <img src="images/book_searcher.jpg" class="img-responsive" alt="">
 3   <div class="portfolio-box-question">
 4       <span class="glyphicon glyphicon-question-sign"></span>
 5   </div>
 6   <div class="portfolio-box-caption">
 7     <div class="portfolio-box-caption-content">
 8       <div class="project-category text-faded">
 9           Web app
10       </div>
11       <div class="project-name">
12         Book Searcher
13         <p>Search the NY Times best sellers list and see info and ratings about each book.</p>
14         <p>
15           <a href="/blog/booksearcher" class="btn btn-sm portfolio-button">Learn more</a>
16           <a href="http://booksearcher.erica.tech" class="btn portfolio-button btn-sm">Visit the site</a>
17         </p>
18       </div>
19     </div>
20   </div>
21 </div>

CSS:

 1 .portfolio-box .portfolio-box-caption {
 2     display: block;
 3     position: absolute;
 4     bottom: 0;
 5     width: 100%;
 6     height: 100%;
 7     text-align: center;
 8     color: #fff;
 9     opacity: 0;
10     background: rgba(240,95,64,.9);
11     -webkit-transition: all .35s;
12     -moz-transition: all .35s;
13     transition: all .35s;
14     z-index: 2;
15 }
16 
17 .portfolio-box-question {
18     display: block;
19     position: absolute;
20     bottom: 0;
21     width: 100%;
22     height: 100%;
23     color: #f05f40;
24     z-index: 1;
25     font-size: 5em;
26     display: flex;
27     justify-content: center;
28     align-items: center;
29 }

JavaScript

1 $(".portfolio-box-question").on('click touchstart', function() {
2   $(".portfolio-box-caption").css("opacity", "1");
3 });

The new look

Non-touchscreen

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.

Portfolio image default

Portfolio image default

Touchscreen

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.

Portfolio image default Portfolio image default

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!