how about this?
src : CSS hover effect for PNG images
enter code here
.navLi img {
opacity: 0.3;
}
.img:hover {
opacity: 1;
}
Solution 1 :
Solution 2 :
You need to apply the styles to the parent element .navDash:
.navDash:hover {
background: blue;
color: white;
}<li class="navDash">
<img class="dashImg" width="200" src="https://openclipart.org/image/800px/170531" alt=""> Dashboard
</li>If you want to only affect the image then you should wrap it with it’s own parent div:
.dashImgWrapper {
display: inline-block;
}
.dashImgWrapper:hover {
background: blue;
color: white;
}<li class="navDash">
<div class="dashImgWrapper">
<img class="dashImg" width="200" src="https://openclipart.org/image/800px/170531" alt="">
</div>
Dashboard
</li>Solution 3 :
Elaborating on j08691’s comment, the thing is, for an <img> element, the color and background properties don’t have any effect on it, that’s because the <img> element only displays the image given to it. Thus, even though these properties are applied on the <img> tag on hover, they have no effect on it.
Other properties that affect the <img> tag like height will show its effect on hover.
Based on what you wanted, here’s the code that will give you the desired outcome:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>ITC-SaaS Kit</title>
<link rel="stylesheet" href="/new.css" />
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans&display=swap" rel="stylesheet">
<style type="text/css">
.navLi:hover{
background: #16251217;
color: #90A0B7;
}
/*On hover, the image will dissappear and the span will take the required color.*/
.navLi img:hover {opacity: 0;}
.navLi span:hover {background-color: blue; display:inline-block;}
</style>
</head>
<body>
<div class="side-bar">
<h3 class="nav-header">Saas Kit</h3>
<ul class="navUl">
<li class="side1"><b>Sierra Ferguson</b></li>
<span class="side2">[email protected]</span>
<span id="side1-2"><img src="" alt=""></span>
<li class="navDash"><img class="dashImg" src="./imgs/Vector.png" alt=""> Dashboard</li>
<!--Put all <img> tags inside a <span> tag.-->
<li class="navLi"><span><img src="./imgs/Tasks.png" alt="tasks"></span></li>
<li class="navLi"><span><img src="./imgs/Email.png" alt="email"></span></li>
<li class="navLi"><span><img src="./imgs/Contacts.png" alt="contacts"></div></li>
<li class="navLi"><span><img src="./imgs/Chat.png" alt=""></span></li>
<li class="navLi"><span><img src="./imgs/Deals.png" alt=""></span></li>
<!-- <li class="navLi">toggle</li> -->
<li></li>
</ul>
</div>
<div class="main-content">
<div class="nav">asdasd</div>
<div class="tasks">
<div class="left-side">
<div class="top-left">
<ul class="date">
<li>Monday</li>
<li>monday</li>
<li>monday</li>
<li>monday</li>
<li>monday</li>
<li>monday</li>
<li>monday</li>
</ul>
</div>
<div class="bottom-left">adasd</div>
</div>
<div class="right-side">asda</div>
</div>
</div>
</body>
</html>
Here, we have put all the <img> elements inside a <span> element. So, whenever the user hovers on the image, the image will become transparent (or disappear) and that span tag will take the color you want it to.
Solution 4 :
Try this:
img:hover {
border: 3px solid black;
}
Problem :
How to make hover effects for an image?
code sample:
img:hover {
background: X;
color: X
}<li class="navDash">
<img class="dashImg" width="200" src="https://openclipart.org/image/800px/170531" alt=""> Dashboard
</li>Comments
Comment posted by j08691
The properties you’re changing on hover wouldn’t change the appearance of an image
Comment posted by asaf danan
ok! thank you for your comment. how can I make them go blue when I hover onto them? this is what the assignment is asking me to do. is it possible to make it happen if I maybe use an SVG instead of actual img? I prefer staying with an image tho. any suggestions?
Comment posted by Ansh
Check if the updated code sample solves your problem.
Comment posted by ibb.co/RDhg83r
ok it worked…. but not my desired color.. check this photo.. it’s gray background.. and i actually want it blue.
Comment posted by Ansh
You can simply change the background-color of the span element to the color you want. 🙂
Comment posted by asaf danan
nope.. not working. anything else?