Wie zeige ich einen Text auf dem Bild an?

Question

Ich arbeite gerade an meiner neuen Website (Rails, SASS) und ich brauche deine Hilfe mit meinem CSS.

Ich habe ein paar Bilder von meinen Projekten. Ich möchte keinen Text auf Bildern, nur wenn img: hover => dieser Text angezeigt werden soll.

Ich habe das versucht, aber ich habe keinen Text auf Bild Hover angezeigt.

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

Hier ist meine 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; 
     } 
    } 
} 

Answer 1

Nur ein Tooltip zum Bild hinzufügen:

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

Answer 2

Wenn Sie Text irgendwo anders auf der Seite angezeigt werden sollen Sie kann jQuery verwenden:

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'); 
}); 

Wenn Sie Text als kleines Popup-Ding irgendwie auf das Bild angezeigt werden soll:

Sie können fügen Sie einfach einen Titel, um das Bild :

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

Alle Browser zeigen Ihnen den Titel an, wenn Sie den Mauszeiger über ein Bild bewegen.

Answer 3

Vielen Dank für Ihre Hilfe, meine Frage/Problem wurde wahrscheinlich nicht gut gestellt, aber ich finde endlich die Lösung.

Der Hover musste nur auf dem Thumbnail sein, um zu vermeiden, dass der Hover-Effekt beim Klicken auf den Text verschwindet .. und ich suchte nach einer Opacacity auf dem Bild: hover, und den Text über dem Bild anzeigen lassen wenn Miniaturansicht: schweben.

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>