How to make image responsive on text hover
Question
I'm working on my website, where I made some custom changes for the home page. I wanted to display the images only when the user hovers over the text. I have absolutely no knowledge on this topic / coding in general so I'm glad that I was able to make it work somehow for desktop, but I'm stuck what to do to make the images responsive. I would really appreciate if someone could help me out with this, here's what I was able to work out so far:
<script language="Javascript"> function ShowPicture(id,Source) { if (Source=="1") { if (document.layers) document.layers[''+id+''].visibility = "show" else if (document.all) document.all[''+id+''].style.visibility = "visible" else if (document.getElementById) document.getElementById(''+id+'').style.visibility = "visible" } else if (Source=="0") { if (document.layers) document.layers[''+id+''].visibility = "hide" else if (document.all) document.all[''+id+''].style.visibility = "hidden" else if (document.getElementById) document.getElementById(''+id+'').style.visibility = "hidden" } } </script>
<style type="text/css"> #Style2 { position: fixed; width:650px; height:440px; top: 110px; right: 55px; visibility:hidden; } h1 { margin-top: 100px; } </style> </style> <a href="" onMouseOver="ShowPicture('Style2',1)" onMouseOut="ShowPicture('Style2',0)"><h3>a<h3><h4>b<h4></a> <div id="Style2"><img src="></div>
2 answers
solution1
0 2018-02-20 13:53:02
Use CSS:
#Style2 > img {
width: 100%;
}
That will make image always fit container. Example:
function ShowPicture(id,Source) { if (Source=="1"){ if (document.layers) document.layers[''+id+''].visibility = "show" else if (document.all) document.all[''+id+''].style.visibility = "visible" else if (document.getElementById) document.getElementById(''+id+'').style.visibility = "visible" } else if (Source=="0"){ if (document.layers) document.layers[''+id+''].visibility = "hide" else if (document.all) document.all[''+id+''].style.visibility = "hidden" else if (document.getElementById) document.getElementById(''+id+'').style.visibility = "hidden" } }
#Style2 { position: fixed; width:250px; height:440px; top: 110px; right: 55px; visibility:hidden; } h1 { margin-top: 100px; } #Style2 > img { width: 100%; }
<a href="http://kirakoroknai.com/project/bock-albus" onMouseOver="ShowPicture('Style2',1)" onMouseOut="ShowPicture('Style2',0)"> <h3>absence</h3><h4>— visual identity</h4> </a> <div id="Style2"><img src="https://i1.wp.com/kirakoroknai.com/wp-content/uploads/2018/02/kira-koroknai-absence-graphic-design-exhibition-identity-13.jpg?fit=2200%2C1760"></div>
solution2
-1 2018-02-20 14:04:26
I dont really see the point of using JS in this case... you can do all with CSS (as far as i understand the question)
<!DOCTYPE html> <html lang="en"> <head> <!-- head content --> <style> #img { display: none; } #link:hover + #img { display: block; } </style> </head> <body> <div id="link">Hover me</div> <img id="img" src="http://lorempizza.com/240/240"> </body> </html>
maybe its not this your looking for, but i tried to help ;)
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.