How to display a text on image hover ?

Question!

I'm currently working on my new website (Rails, SASS) and I need your help with my CSS.

I have some pictures of my projets. I don't want text on pictures, only if img:hover => this text have to be displayed.

I've tried this, but I don't have text displayed on image hover.

      <div class="bodyprojet">
      <% @Projets.limit(15).in_groups_of(3, false).each do |group| %>
          <div class="row">
            <% group.each do |projet| %>
                <div class="col-sm-6 col-md-4">
                  <a href="<%= projet_path(projet.slug) %>">
                    <div class="thumbnail">
                      <p class="text">Voir</p>
                      <img src="<%= projet.image.url(:thumb) %>" alt="<% projet.title %>">
                    </div>
                  </a>
                </div>
            <% end %>
          </div>
      <% end %>
  </div>

Here is my CSS (SASS) :

    .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;

            &: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;
        }
    }
}


Answers

Thanks for your help, my question/issue was probably not well asked, but I finally find the solution.

The hover had to be only on the thumbnail to avoid that the hover effect disappear when trying to click on the text.. and I was looking for an opacacity on the image:hover, and make the text displayed over the image when thumbnail:hover.

CSS :

    .thumbnail {
        border:none !important;
        padding:0 !important;
        position: relative;
        background: #000;
        margin: 5px;

    &:hover {
        img {
            opacity: 0.5;
        }

        span.text {
            visibility: visible;
            opacity: 1;
        }
    }

    img {
        min-height: 100%;
        min-width: 100%;
        -webkit-transition: .3s ease-in-out;
        transition: .3s ease-in-out;
    }

    span.text {
        opacity: 0;
        visibility: hidden;
        position: absolute;
        top:82%;
        left: 30%;
        font-weight: 700;
        font-family:"Source Sans", sans-serif;
        font-size: 18px;
        color:#FFF !important;
        text-transform: uppercase;
         -webkit-transition: .8s ease-in-out;
        transition: .8s ease-in-out;
    }
}

HTML :

    <div class="bodyprojet">
      <% @Projets.limit(15).in_groups_of(3, false).each do |group| %>
          <div class="row">
            <% group.each do |projet| %>
                <div class="col-sm-6 col-md-4">
                  <a href="<%= projet_path(projet.slug) %>">
                   <div class="thumbnail">
                    <img src="<%= projet.image.url(:medium) %>" alt="<% projet.title %>">
                    <span class="text">Voir le projet</span>
                  </div>
                 </a>
                </div>
            <% end %>
          </div>
      <% end %>
    </div>


If you meant to display text somewhere else on the page you can use jQuery:

html:

<div class="thumbnail">
  <p class="text">Voir</p>
  <img src="<%= projet.image.url(:thumb) %>" alt="<% projet.title %>" class="my-image">
</div>

Jquery:

$(document).on('hover', '.my-image', function() {
  $('.text').text('The text you want to appear');
});

If you meant to display text as a small popup kinda thing on the picture:

You can simply add a title to your image:

<img src="<%= projet.image.url(:thumb) %>" alt="<% projet.title %>", title="This is the text that will be shown on hover">

All browsers will show you the title when hovering over an image.

By : luissimo


Just add a tooltip to the image:

 <img src="<%= projet.image.url(:thumb) %>" alt="<% projet.title %>" title="This shows up on mouseover" >
By : bkunzi01


This video can help you solving your question :)
By: admin