Image Rollover and Responsive Size Code not Responsive

kythr · May 1, 2020

Hello,

I have been using W3 tutorials to create custom code elements on my weebly website. Lately I have been having issues with a code I created from two separate tutorials: image roll over and responsive size. The code is situated within a greater grid created with weebly's building tools. Image rollover and responsive size work in W3's try it editor, but on my website only the rollover works.

On a full size window everything looks just fine (the bottom left is the custom coded element) but a slighter smaller window results in a slide bar to view the full image, because it will not scale down. On a phone-scaled window, the opposite happens and it doesn't scale up, appearing significantly smaller. Any help would be much appreciated!!! I have included images and the latest code I've tried to show what's happening. Thank you!!!!!

001.jpg.8ff60be0dafde23eccd31eca83a5bc79.jpg 002.jpg.cead6d16e29e59dbb55f85dd42681351.jpg

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
    img{
        width: 100%;
        height: auto;
     }
    .box{
        width: 100%;
        height: auto;
        position: relative;
        display: inline-block;
        margin: 10px 0px 10px 0px;
     }    
    .box .img-top {
        width: 100%;
        height: auto;
        display: none; 
        position: absolute;
        top: 0;
        left: 0;
        z-index: 0;
    }
    .box:hover .img-top {
        display: inline;
</style>
</head>
<body>
    
    <div class="box">
        <img src="https://drive.google.com/thumbnail?id=1NJjBTmUClAxB3vqIDrDKzFTAF_HFqzHI" alt="Card Front">
        <img src="https://drive.google.com/thumbnail?id=1XNQ_ARudR0M_hEuB3ErCyxDhHxSGKPMo" class="img-top" alt="box Front">
    </div>
</body>
</html>                    
      <!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
img{
  width: 100%;
  height: auto;
     }
.box{
  width: 100%;
  height: auto;
  position: relative;
  display: inline-block;
  margin: 10px 0px 10px 0px;
}    
.box .img-top {
  width: 100%;
  height: auto;
  display: none; 
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
}
.box:hover .img-top {
  display: inline;
}
</style>
</head>
<body>
    
<div class="box">
   <img src="https://drive.google.com/thumbnail?id=1NJjBTmUClAxB3vqIDrDKzFTAF_HFqzHI" alt="Card Front" width="720" height= "720">
   <img src="https://drive.google.com/thumbnail?id=1XNQ_ARudR0M_hEuB3ErCyxDhHxSGKPMo" class="img-top" alt="box Front"width="720" height= "720">
</div>
</body>
</html>

dsonesuk · May 2, 2020

Clue:

For every opening they should be equal number of closing css curly braces.

kythr · May 11, 2020

Thanks dsonesuk! I didn't notice the missing closing curly brace after display: inline;

However, it's still not working. Do you have anymore clues?

Sign In

Image Rollover and Responsive Size Code not Responsive

Recommended Posts

kythr

Link to comment

Share on other sites

dsonesuk

Link to comment

Share on other sites

kythr

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Browse

Activity