Looking for assistance with hover states on touch devices. For touch devices, the hover state should appear after a single tap, with a second tap needed to activate the link.
I have modernizr with touch-events enabled, but I'm unsure how to implement this in my scenario.
<div class="frontblock">
<a href="">
<div class="more">Description Here</div>
<img src="http://upload.wikimedia.org/wikipedia/commons/1/1c/CSS.png" />
</a>
</div>
.frontblock {
padding: 0;
overflow: hidden;
position: relative;
height: auto;
background: #333;
width: 50%;
}
.frontblock img {
width: 100%;
height: 100%;
display: block;
}
.frontblock .more {
background: #FFF;
position: absolute;
text-align:center;
margin-top: 130px;
z-index: 100;
left: 0;
opacity: 0;
width:100%;
height:100%;
-webkit-transition: all 500ms ease-out;
-moz-transition: all 500ms ease-out;
-o-transition: all 500ms ease-out;
-ms-transition: all 500ms ease-out;
transition: all 500ms ease-out;
}
.frontblock:hover .more {
opacity: 0.8;
}
View it on jsfiddle http://jsfiddle.net/rhodesign/nhDbL/
Allow me to clarify my issue.
- I have various boxes, similar to a portfolio page (.frontblock).
- Each box is linked to a different page and displays an image.
- When hovered over, the box is covered with descriptions (.more).
- Clicking the link will open the corresponding page.
On mobile devices (touchscreens), I want the hover effect (.more) to trigger after the first tap and require a second tap to activate the link.