0

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!

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style 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');
    }
</style>
</head>
<body>
<a href="http://www.corelangs.com" class="responsive" title="Corelangs link"></a>
</body>
</html>
carolina bardelli
  • 1

1 Answers1

0

You need to set the size explicitly 

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

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)

<!DOCTYPE html>
<html>
  <head>
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <style type="text/css">
          .container {
            position: relative;
            width: auto;
          }
          .responsive {
              background-image: url('http://laurasbdar.com/wp-content/uploads/2019/04/articulos2.jpg');
              background-repeat: no-repeat;
              display: inline-block;
          }
          .responsive:hover {
              background-image: url('http://laurasbdar.com/wp-content/uploads/2019/04/articulos1.jpg');
          }
      </style>
  </head>
  <body>
      <a href="http://www.corelangs.com" title="Corelangs link"><div class="responsive"><img style="visibility: hidden;" src="http://laurasbdar.com/wp-content/uploads/2019/04/articulos2.jpg" ></div></a>
  </body>
</html>
Dmitriy
  • 91
  • 4