png image hover CSS effects-CodePudding

is it possible to make hover effects for an image? how can i possibly make it happen? code sample:

HTML:

<div >
        <h3 >Saas Kit</h3>
      <ul >
        <li ><b>Sierra Ferguson</b></li>
        <span >[email protected]</span>
        <span id="side1-2"><img src="./imgs/image 2.png" alt=""></span>
        <li ><img  src="./imgs/Vector.png" alt=""> Dashboard</li>
        <li ><img src="./imgs/Tasks.png" alt="tasks"></li>
        <li ><img src="./imgs/Email.png" alt="email"></li>
        <li ><img src="./imgs/Contacts.png" alt="contacts"></li>
        <li ><img src="./imgs/Chat.png" alt=""></li>
        <li ><img src="./imgs/Deals.png" alt=""></li>
        <!-- <li >toggle</li> -->
        <li></li>
          </ul>

CSS:

.navLi:hover{
    background: #16251217;
    color: #90A0B7;
}
.navLi img:hover{
    background: #16251217;
    color: #90A0B7;
    }

i even tried:

img:hover{
background: X;
color: X
}

what can i do?

full HTML code:

<!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">
  </head>
  <body>
    <div >
        <h3 >Saas Kit</h3>
      <ul >
        <li ><b>Sierra Ferguson</b></li>
        <span >[email protected]</span>
        <span id="side1-2"><img src="./imgs/image 2.png" alt=""></span>
        <li ><img  src="./imgs/Vector.png" alt=""> Dashboard</li>
        <li ><img src="./imgs/Tasks.png" alt="tasks"></li>
        <li ><img src="./imgs/Email.png" alt="email"></li>
        <li ><img src="./imgs/Contacts.png" alt="contacts"></li>
        <li ><img src="./imgs/Chat.png" alt=""></li>
        <li ><img src="./imgs/Deals.png" alt=""></li>
        <!-- <li >toggle</li> -->
        <li></li>
          </ul>
    </div>
    <div >
      <div >asdasd</div>
      <div >
        <div >
          <div >
            <ul >
              <li>Monday</li>
              <li>monday</li>
              <li>monday</li>
              <li>monday</li>
              <li>monday</li>
              <li>monday</li>
              <li>monday</li>
            </ul>
          </div>
          <div >adasd</div>
        </div>
        <div >asda</div>
      </div>
    </div>
  </body>
</html>

CodePudding user response：

try this

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

CodePudding user response：

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 >
        <h3 >Saas Kit</h3>
      <ul >
        <li ><b>Sierra Ferguson</b></li>
        <span >[email protected]</span>
        <span id="side1-2"><img src="" alt=""></span>
        <li ><img  src="./imgs/Vector.png" alt=""> Dashboard</li>
        <!--Put all <img> tags inside a <span> tag.-->
        <li ><span><img src="./imgs/Tasks.png" alt="tasks"></span></li>
        <li ><span><img src="./imgs/Email.png" alt="email"></span></li>
        <li ><span><img src="./imgs/Contacts.png" alt="contacts"></div></li>
        <li ><span><img src="./imgs/Chat.png" alt=""></span></li>
        <li ><span><img src="./imgs/Deals.png" alt=""></span></li>
        <!-- <li >toggle</li> -->
        <li></li>
          </ul>
    </div>
    <div >
      <div >asdasd</div>
      <div >
        <div >
          <div >
            <ul >
              <li>Monday</li>
              <li>monday</li>
              <li>monday</li>
              <li>monday</li>
              <li>monday</li>
              <li>monday</li>
              <li>monday</li>
            </ul>
          </div>
          <div >adasd</div>
        </div>
        <div >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.

CodePudding user response：

Go ahead and check this article out, it gives a list of a lot of hover css effects that you may find useful.

-> https://www.foolishdeveloper.com/2022/03/css-image-hover-effects.html