如何在图像悬停上显示文本？

我目前正在研究我的新网站（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

如何在图像悬停上显示文本？

回答

相关问题