html - 如何创建类似 Dribbble 的图像悬停效果？

Question

我想知道如何让一个包含文本/其他内容的 div 在鼠标悬停时显示在图像的顶部。类似于 Dribbble 的方式(当您将鼠标悬停在图片上时，文本会出现在图片上方)。

这是我到目前为止的代码(旁注:我不是一个编码员，我只知道基础知识，所以请耐心等待):

HTML

<div id="portfolio-grid">
    <div id="portfolio-column">
        <div id="portfolio-item">
        <img src="images/portfolio-thumbs/1.jpg" alt="Portfolio Item 1">
        </div>
        <div id="portfolio-item">
        <img src="images/portfolio-thumbs/1.jpg" alt="Portfolio Item 2">
        </div>
</div>

CSS

#portfolio-grid {
  height: 1043px;
  margin-left: 19px;
  margin-bottom: 55px;
  float:left;
}
#portfolio-column {
  width: 276px;
  margin-right: 19px;
  float:left;
}
#portfolio-item {
  width: 276px;
  margin-bottom: 15px;
  float:left;
}

这是悬停前的图像示例:http://cl.ly/VMln这是我希望鼠标悬停时的样子:http://cl.ly/VNJY

如果有一种方法可以在两者之间进行轻微的过渡，比如让内容淡入，那就太棒了!

提前谢谢你:)

Answer 1

您可以使用 CSS 过渡和不透明度来做到这一点:

FIDDLE

此外，您不能在标记中使用两次 id。 ID 必须是唯一的，您应该为 portfolio-item 使用 class 而您忘记了 #portfolio-grid

的结束标记

HTML:

<div id="portfolio-grid">
    <div id="portfolio-column">
        <div class="portfolio-item">
            <img src="http://lorempixel.com/output/people-h-g-353-550-4.jpg" alt="Portfolio Item 1" />
            <div class="content">your text here</div>
        </div>
        <div class="portfolio-item">
            <img src="http://lorempixel.com/output/fashion-h-g-353-550-1.jpg" alt="Portfolio Item 2" />
            <div class="content">your text here</div>
        </div>
    </div>
</div>

CSS:

#portfolio-grid {
    height: 1043px;
    margin-left: 19px;
    margin-bottom: 55px;
    float:left;
}
#portfolio-column {
    width: 276px;
    margin-right: 19px;
    float:left;
}
.portfolio-item {
    width: 276px;
    margin-bottom: 15px;
    float:left;
    position:relative;
}
.portfolio-item img {
    display:block;
    width: 276px;
    height:auto;
}
.content {
    position:absolute;
    top:0;
    left;
    0;
    width:100%;
    height:100%;
    background:#E74C3C;
    opacity:0;
    -webkit-transition: opacity 1s;
    transition: opacity 1s;
}
.portfolio-item:hover .content {
    opacity:1;
}