Search code examples
csshoveropacityrgba

why hover doesn't work .CSS RGBA NOT WORKING

why rgba hover does not work ? this my code

.img {
width: 100%;
height: 250px;
background: url(http://cos.jpg) no-repeat;
background-size: cover;
margin-bottom: 20px;

not working rgba

.image:hover{
background-color: rgba(251, 181, 59, 0.5);
Solution

  • May be you are not closed image style properly. Check your code once. Meanwhile try my example, here Image hover works fine, i just gave some border for better understanding, may be this will help you. 

    <!DOCTYPE html>
<html>
<head>
<style> 
.main{
padding:20px;
margin:20px;
}
.img {
width: 200px;
height: 200px;
background: url("https://www.w3schools.com/cssref/img_tree.gif") no-repeat;
padding:20px;
margin:20px;
}
.img:hover{
background-color: rgba(255, 255, 0, 0.9);
border:5px solid green;
}
</style>
<body>
<div class="main">
	<div class="img"></div>
</div>
</body>
</html>