<figure>
  <h1>Hover to reveal information</h1>
  <img class="dog" src="http://i306.photobucket.com/albums/nn241/minifox78/2018-11-28%202_zpsmv5zj4qw.png">
  
<button class="coat">
      <img src="http://i306.photobucket.com/albums/nn241/minifox78/new_zpshp4yymy1.png">
      <p>Winter coats protect internal organs, while regulating body temperature.
      </p>
      </button>

   
      <button class="boots cantclick">

      <img src="http://i306.photobucket.com/albums/nn241/minifox78/2018-11-28%205_zpst6hcuoqy.png">

      <p>
        Winter booties protect from the cold and the dangerous salts used to melt ice.
      </p>
  </button>
</figure>
@import url('https://fonts.googleapis.com/css?family=Open+Sans');



/* Just for troubleshooting */
ul {outline:1px solid red;}
figure {outline:0px solid blue;}
img{outline:0px solid lime;}
button{background-color: transparent}


/* simple reset */
*{margin:0;padding:0;box-sizing: border-box;}
/* ensure default-inline elements are blocks */
img,button{display: block;}

/* I'd rely on the perfect-positioning trick but use % instead of pixels */
figure{position: relative;}
h1, button, img, p{position: absolute;}

/* craft the layout to a responsive width! using viewport "width" units!!*/
figure{width: 100vw; height: 50vw;}
img{width: 100%;}

/* Place the ul to the right of the layout and dog to the left */
img.dog{width: 70vw; top: 5vw; left: 0; z-index: -1;}
ul{width: 30vw; top: 0; right: 0;}


/* design details  small design touches like padding in 'px' is okay here*/
figure {
  font-family: "Open Sans";
}

h1{
  color: gray;
  font-size: 2vw;
  padding: 4px;
  font-weight: normal;
}

p {
  font-size: 3vw;
}

/* getting the ul children properly "sized" % for images can work here because the parent is using vw! */

ul .organ{
  width: 70%;
}
ul .paw{
  width: 40%;
}
p{
 text-align: left;
 border:1px solid black;
 border-bottom:20px solid black; 
 padding: 10px;
}

/* MORE perfect positioning inside button parent but the math gets weird since you are shoving the caption outside the smaller button?! NOTE: you need to force v-widths and account for the postion of the button parent… T:10vw, L:20vw etc…  */

button.coat{width: 30vw; height:20vw; top: 10vw; left: 20vw;}
button.boots{width: 38vw; height:8vw; top: 40vw; left: 20vw;}

p{width:30vw; height: 30vw; left: 50vw;}
.coat p{top: 10vw;}
.boots p{top: -20vw;}
.coat img{width: 20vw; top: -5vw; left: 55vw;}
.boots img{width: 12vw; top: -35vw; left: 60vw;}



/* finally, sixe and move buttons into place use 'vw" for everything so it scales */
button{border:none; 
  cursor:pointer;
}


/* Interactivity */
button img {opacity: 0; 
  transition: opacity .5s ease;
}
button p {color: transparent;  
    transition: color .3s .2s ease;
}

.coat:hover img, .coat:hover p{
  opacity: 1; 
  color: black;
}

.boots:hover img, .boots:hover p{
  opacity: 1; 
  color: black;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.