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的类，而忘记了#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;
}

如何创建一个Dribbble-esque图像悬停效果？

1 个答案: