Jump to content
kythr

Image Rollover and Responsive Size Code not Responsive

Recommended Posts

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>    

 

Share this post


Link to post
Share on other sites

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?

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...