title: How to display a text on image hover ?
body: <p>I'm currently working on my new website (Rails, SASS) and I need your help with my CSS.</p>
  
  <p>I have some pictures of my projets. 
  I don't want text on pictures, only if img:hover => this text have to be displayed. </p>
  
  <p>I've tried this, but I don't have text displayed on image hover.</p>
  
  <pre><code>      &lt;div class="bodyprojet"&gt;
        &lt;% @Projets.limit(15).in_groups_of(3, false).each do |group| %&gt;
            &lt;div class="row"&gt;
              &lt;% group.each do |projet| %&gt;
                  &lt;div class="col-sm-6 col-md-4"&gt;
                    &lt;a href="&lt;%= projet_path(projet.slug) %&gt;"&gt;
                      &lt;div class="thumbnail"&gt;
                        &lt;p class="text"&gt;Voir&lt;/p&gt;
                        &lt;img src="&lt;%= projet.image.url(:thumb) %&gt;" alt="&lt;% projet.title %&gt;"&gt;
                      &lt;/div&gt;
                    &lt;/a&gt;
                  &lt;/div&gt;
              &lt;% end %&gt;
            &lt;/div&gt;
        &lt;% end %&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p>Here is my CSS (SASS) : </p>
  
  <pre><code>    .bodyprojet {
          padding:0;
          margin: 0;
  
      .row {
          margin: 0 !important;
          padding: 0 !important;
  
          .col-md-4.col-sm-6 {
              padding:0px 5px 0px 5px;
              margin: 0;
          }
      }
  
      a {
          border:none !important;
          text-decoration: none !important;
          color:#000000 !important;
      }
  
      .thumbnail {
          border:none !important;
          background: #FFED00;
          padding:0 !important;
          position: relative;
  
          img {
              min-height: 100%;
              display: block;
              min-width: 100%;
              opacity: 1;
              -webkit-transition: .3s ease-in-out;
              transition: .3s ease-in-out;
  
              &amp;:hover {
              opacity: .2;
              }
          }
  
          p.text {
              position: absolute;
              left:50%;
              top:50%;
              color:#979797;
              opacity: 0;
              font-size: 30px;
          }
  
          img:hover p.text {
              color:#000;
              opacity: 1;
          }
      }
  }
  </code></pre>