Please allow ads on our site
Please log in to access this content. You will be redirected to the login page shortly.
Loginhow to make a image on image hover responsive?
General Tech Bugs & Fixes 2 years ago
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.
Answers (2)
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" > 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.
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!