我试图模仿(以简单的方式)此页面的样式3种个人格背景颜色: http://www.smoolis.com/screen/pricing/language/en如何淡出悬停(HTML,CSS)
本质上讲,我打算创造三个产品图像在上面的表格,其中三个图像背后的背景颜色在淡入淡出效果时略微改变。
我能够找到很多图像变化的例子,但很少有一个div的背景颜色 - 你有这样的工作的例子吗?
我WIP代码可以在这里找到,但它有两个问题: 1)我想补充的3个图像后面三种不同的背景颜色 2)我会非常不希望图像褪色,而是背景颜色 3)我想要背景颜色独立淡出 - 例如现在图像同时全部淡出
任何帮助将超级赞赏!
<style>
table {
border-collapse: collapse;
width: 100%;
}
th, td {
padding: 8px;
text-align: center;
border-bottom: 1px solid #ddd;
}
.image {
opacity: 1;
display: block;
width: 100%;
height: auto;
transition: .5s ease;
backface-visibility: hidden;
}
.container {
position: relative;
width: 50%;
}
.container:hover .image {
opacity: 0.8;
}
</style>
<div id="columns">
<div class="one-third">
<div class="container">
<img src="http://mikemoir.com/mikemoir/wp-content/uploads/2015/06/MedRes_Product-presentation-2.jpg" alt="Avatar" class="image">
<div class="overlay"></div></div>
<table>
<tbody><tr>
<th>Firstname</th>
</tr>
<tr>
<td>Peter</td>
</tr>
<tr>
<td>Lois</td>
</tr>
<tr>
<td>Joe</td>
</tr>
<tr>
<td>Cleveland</td>
</tr>
</tbody></table>
</div>
<div class="one-third">
<div class="container">
<img src="http://mikemoir.com/mikemoir/wp-content/uploads/2015/06/MedRes_Product-presentation-2.jpg" alt="Avatar" class="image">
<div class="overlay"></div></div>
<table>
<tbody><tr>
<th>Firstname</th>
</tr>
<tr>
<td>Peter</td>
</tr>
<tr>
<td>Lois</td>
</tr>
<tr>
<td>Joe</td>
</tr>
<tr>
<td>Cleveland</td>
</tr>
</tbody></table>
</div>
<div class="one-third-last">
<div class="container">
<img src="http://mikemoir.com/mikemoir/wp-content/uploads/2015/06/MedRes_Product-presentation-2.jpg" alt="Avatar" class="image">
<div class="overlay"></div></div>
<table>
<tbody><tr>
<th>Firstname</th>
</tr>
<tr>
<td>Peter</td>
</tr>
<tr>
<td>Lois</td>
</tr>
<tr>
<td>Joe</td>
</tr>
<tr>
<td>Cleveland</td>
</tr>
</tbody></table>
</div>
</div>