how to make a image on image hover responsive?

General Tech Bugs & Fixes 2 years ago

1 2 0 0 0 tuteeHUB earn credit +10 pts

5 Star Rating 1 Rating

Posted on 30 Aug 2022, this text provides information on Bugs & Fixes related to General Tech. Please note that while accuracy is prioritized, the data presented might not be entirely correct or up-to-date. This information is offered for general knowledge and informational purposes only, and should not be considered as a substitute for professional advice.

Take Quiz To Earn Credits!

Turn Your Knowledge into Earnings.

tuteehub_quiz

Answers (2)

Post Answer
profilepic.png
manpreet Tuteehub forum best answer Best Answer 2 years ago

 

I'm trying to make a image change on hover with another image and I can't seem to make it responsive. I've tried putting the height into auto but it doesn't fix it. Thanks!




 name="viewport" content="width=device-width, initial-scale=1">
 type="text/css">
.container {
  position: relative;
  width: auto;
}
    .responsive {
        background-repeat: no-repeat;
        width: 100% ;
        height: auto;
        display: inline-block ;
        background-image: url('http://laurasbdar.com/wp-content/uploads/2019/04/articulos2.jpg');
    }
    .responsive:hover {
        background-image: url('http://laurasbdar.com/wp-content/uploads/2019/04/articulos1.jpg');
    }


<body>
 href="http://www.corelangs.com" class="responsive" title="Corelangs link">
body>
profilepic.png
manpreet 2 years ago

 

You need to set the size explicitly



  
       name="viewport" content="https://forum.tuteehub.com/tag/width">width=device-https://forum.tuteehub.com/tag/width">width, initial-scale=1">
       type="text/css">
          .container {
            position: relative;
            https://forum.tuteehub.com/tag/width">width: auto;
          }
          .responsive {
              https://forum.tuteehub.com/tag/width">width:  100px;
              height: 100px;
              display: inline-block ;
              background-https://forum.tuteehub.com/tag/image">image: url('http://laurasbdar.com/wp-content/uploads/2019/04/articulos2.jpg');
              background-repeat: no-repeat;
          }
          .responsive:hover {
              background-https://forum.tuteehub.com/tag/image">image: url('http://laurasbdar.com/wp-content/uploads/2019/04/articulos1.jpg');
          }
      
  
  
       href="http://www.corelangs.com" class="responsive" title="Corelangs link">
  

but there is a way to make this work without knowing the size. Although, it will take the size of the image in img src (based on this post)



  
       name="viewport" content="https://forum.tuteehub.com/tag/width">width=device-https://forum.tuteehub.com/tag/width">width, initial-scale=1">
       type="text/css">
          .container {
            position: relative;
            https://forum.tuteehub.com/tag/width">width: auto;
          }
          .responsive {
              background-https://forum.tuteehub.com/tag/image">image: url('http://laurasbdar.com/wp-content/uploads/2019/04/articulos2.jpg');
              background-repeat: no-repeat;
              display: inline-block;
          }
          .responsive:hover {
              background-https://forum.tuteehub.com/tag/image">image: url('http://laurasbdar.com/wp-content/uploads/2019/04/articulos1.jpg');
          }
      
  
  
       href="http://www.corelangs.com" title="Corelangs link"> class="responsive"> style="visibility: hidden;" src="http://laurasbdar.com/wp-content/uploads/2019/04/articulos2.jpg" >

1 views   0 shares

No matter what stage you're at in your education or career, TuteeHub will help you reach the next level that you're aiming for. Simply,Choose a subject/topic and get started in self-paced practice sessions to improve your knowledge and scores.