如何在圖像懸停上顯示文本？

我目前正在研究我的新網站（Rails，SASS），我需要你的幫助。如何在圖像懸停上顯示文本？

我有我的projets一些圖片。我不想要圖片上的文字，只有當img：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>

這裏是我的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; 
     } 
    } 
}

來源

2016-09-28 Florian_CEO

只是一個工具提示添加到圖像：

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

來源

2016-09-28 18:43:32 bkunzi01

我不想在圖像上的標題，我想的img在文本顯示：懸停。 –

@Florian_CEO你可以請張貼圖像或例子你想要什麼激動人心的 –

如果你的意思是你在頁面上其他地方顯示文本可以使用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'); 
});

如果你的意思是顯示文本作爲一個小的彈出的畫面有點事：

您可以將標題簡單地添加到您的圖像：

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

當鼠標懸停在圖像上時，所有瀏覽器都會顯示標題。

來源

2016-09-28 21:44:25 luissimo

感謝您的幫助，我的問題可能不是很好問，但我終於找到了解決方案。

懸停必須只在縮略圖上，以避免懸停效果消失，當試圖點擊文本..我正在尋找圖像上的不透明度：懸停，並使圖像顯示在圖像上當縮略圖：懸停。

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>

來源

2016-09-29 13:48:47

如何在圖像懸停上顯示文本？

回答

相關問題