title: CSS3 hover/tap doesn't work in mobile browsers
body: <p>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?</p>
  
  <p>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? :)</p>
  
  <p>JS Fiddle: <a href="http://jsfiddle.net/ygShH/4/" rel="noreferrer">http://jsfiddle.net/ygShH/4/</a></p>
  
  <p>HTML</p>
  
  <pre><code>&lt;article class="project"&gt;
       &lt;div class="project-mask"&gt;
            &lt;div class="thumbnail"&gt;
                 &lt;img src="http://dummyimage.com/292x292/000/fff" alt="desc" height="260" width="260"&gt;
                 &lt;div class="description"&gt;
                      &lt;hgroup&gt;
                           &lt;h2&gt;Title&lt;/h2&gt;
                           &lt;h3&gt;Web&lt;/h3&gt;
                      &lt;/hgroup&gt;
                      &lt;p&gt;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.&lt;/p&gt;
                      &lt;span&gt;
                           &lt;a href="http://site.com" target="_blank"&gt;Visit website&lt;/a&gt;                                &lt;a href="/view-project"&gt;View project&lt;/a&gt;
                      &lt;/span&gt;
                 &lt;/div&gt;
            &lt;/div&gt;
       &lt;/div&gt;
  &lt;/article&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>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;
  }
  </code></pre>