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

Question

我目前正在开发我的新网站（Rails、SASS），我的 CSS 需要您的帮助。

我有一些我的项目的照片。 我不想要图片上的文字，只有当 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;
        }
    }
}

Answer 1

感谢您的帮助，我的问题/问题可能没有很好地提出，但我终于找到了解决方案。

悬停只能在缩略图上，以避免在尝试单击文本时悬停效果消失。我正在寻找图像上的不透明度：悬停，并使文本显示在图像上缩略图：悬停。

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>

Answer 2

如果你想在页面的其他地方显示文本，你可以使用 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">

将鼠标悬停在图像上时，所有浏览器都会向您显示标题。

Answer 3

只需在图像中添加一个工具提示：

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