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,textare
css
Edit
Report