Menu
I created a box that fades into another div when hovered over. This was all done using CSS3. However, one problem I realized was that the hovers don't work in mobile browsers. Is there a way to somehow make this work for mobile or do I have to resort to using some sort of JS?
EDIT: To clarify, I just want to be able to tap the box and have the description show. I've seen it on other websites. How is this usually done? :)
JS Fiddle: http://jsfiddle.net/ygShH/4/
HTML
<article class="project">
<div class="project-mask">
<div class="thumbnail">
<img src="http://dummyimage.com/292x292/000/fff" alt="desc" height="260" width="260">
<div class="description">
<hgroup>
<h2>Title</h2>
<h3>Web</h3>
</hgroup>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
<span>
<a href="http://site.com" target="_blank">Visit website</a> <a href="/view-project">View project</a>
</span>
</div>
</div>
</div>
</article>
CSS
body {
background:#f4f3f1;
color:#666;
font:62.5%/1.6 Helvetica, Arial, Sans-serif;
}
p {
font-size:1.1em;
margin:0 0 1em;
}
h1,h2,h3 {
color:#222;
font-weight:400;
}
h2 {
font-size:1.5em;
margin-top:0;
}
h3 {
font-size:1.1em;
}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,input,textarea {
display:block;
}
.project {
background:#fff;
float:left;
height:260px;
overflow:hidden;
width:260px;
margin:0 20px 20px 0;
padding:20px;
}
.project-mask {
height:260px;
position:relative;
width:260px;
}
.project-mask .description {
-moz-transition:.3s ease-in-out opacity;
-o-transition:.3s ease-in-out opacity;
-webkit-transition:.3s ease-in-out opacity;
transition:.3s ease-in-out opacity;
background:#f4f3f1;
display:block;
height:220px;
left:0;
opacity:0;
position:absolute;
top:0;
width:220px;
padding:20px;
}
.project-mask:hover .description {
opacity:1;
}
.project-mask .description h2 {
margin-bottom:5px;
}
.project-mask .description h3 {
border-bottom:1px solid #ddd;
color:#777;
margin-bottom:10px;
padding-bottom:10px;
}
381
As you know, :hover behavior doesn't exist on touch screen devices. So when you design a responsive website, you should carefully plan when and where to use :hover interactions. Simple links that open some URL will loose their :hover effect on some touch screen devices.
The scrolling behavior in smartphones is different from dragging a cursor using a mouse. Thus, the hover behavior is not available on touch screen devices. For instance, if you create a button with a hover effect on mobile, it would be terrible since your user may have to tap the button twice to activate its function.
Hovers aren't possible on mobile devices as there is no persistent cursor - memory of the last touched point by default.
The only way they can sense interaction is touch, which is akin to a click or selection, so :active in CSS or onclick in Javascript are your only options currently.
Simplistically, in CSS you can define it:
a.class:active {
background-color: #AAA;
...
}
Or:
.class:active {
background-color: #AAA;
...
}
But you need to use the following workaround (or JS events: ontouchstart) to mimic the click:
<body ontouchstart="">
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
