CODEWITHSUNDEEP
htmlcsscss-selectorshover
asaf danan
asaf danan

Reputation: 13

Image effect on hover

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>

Upvotes: 0

Views: 172

Answers (4)

Arleigh Hix
Arleigh Hix

Reputation: 10877

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>

Upvotes: 0

RR13
RR13

Reputation: 39

how about this? src : CSS hover effect for PNG images

enter code here
.navLi img {
   opacity: 0.3;
}

.img:hover {
   opacity: 1;
}

Upvotes: 2

Mohammed
Mohammed

Reputation: 197

Try this:

img:hover {
    border: 3px solid black;
}

Upvotes: 0

Ansh
Ansh

Reputation: 161

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.

Upvotes: 0

Related Questions