我想知道如何让一个包含文本/其他内容的 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
如果有一种方法可以在两者之间进行轻微的过渡,比如让内容淡入,那就太棒了!
提前谢谢你:)
最佳答案
您可以使用 CSS 过渡和不透明度来做到这一点:
此外,您不能在标记中使用两次 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;
}
关于html - 如何创建类似 Dribbble 的图像悬停效果?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23477861/