如何淡出悬停（HTML，CSS）

问题描述：

我试图模仿（以简单的方式）此页面的样式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>

答

为了解决您的三个问题：

以当前的形式背景颜色不能被添加到这些图片，因为他们已经有一个白色背景。如果您想调整这些图像的背景颜色，则需要删除照片编辑程序中的背景。
如果您确实使用了具有透明背景的图像，则以下内容将允许您淡入淡出图像的背景。

.container .image { 
 
    background-color:blue; 
 
    transition:background-color 1s; 
 
} 
 

 
.container .image:hover { 
 
    background-color:LightBlue; 
 
}

<div class=container> 
 
    <img class="image" src="https://www.drupal.org/files/issues/test-transparent-background.png"> 
 
</div> 
 
<div class=container> 
 
<img class="image" src="https://www.drupal.org/files/issues/test-transparent-background.png"> 
 
</div>

的您的示例代码的简单测试表明，至少在我的情况下，图像就分别褪色。

另外，在我如何用透明图像做这件事的例子中，我把悬停属性放在图片上而不是容器上。如果您宁愿使用与您的示例相同的淡入淡出功能，则该行可以更改为.container:hover .image。

开始=>

答

您需要独立设置color:#xxxxxx。而你的图像背景是在名为container的“背景”前面，你需要一个.PNG，所以背景将是可见的。

<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.7; 
 
} 
 

 
.container.color1:hover { 
 
    background-color:#51c2bc; 
 
} 
 
.container.color2:hover { 
 
    background-color:#35a9d2; 
 
} 
 
.container.color3:hover { 
 
    background-color:#007cab; 
 
} 
 
</style> 
 

 
<div id="columns"> 
 
<div class="one-third"> 
 
    <div class="container color1"> 
 
    <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 color2"> 
 
    <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 color3"> 
 
    <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>

如何淡出悬停（HTML，CSS）

相关推荐