0

Here is part of the code I am working on and I want it to add a background around the whole image when I hover over it but when I set the width and height of the div it won't work and only the bottom part is changed as shown in the snippet.

I would like some help on how to solve this problem.

  #select-background{
 display:inline;
  }
  #select-background:hover{
 display:inline;
 background-color:#c1c1c1;
 height:95px;
 width:95px;
 border-radius:10px;
  }
<div id="select-background"><a href="https://hotmail.com"><img height="75" width="75" src="https://arteminc.github.io/stackoverflow-assets/hotmail.png"/></a></div>
mathmaniac88
  • 630
  • 7
  • 22

1 Answers1

0

Try changing the display to block or inline-block. That seems to get your current code to highlight the entire image.

  #select-background{
 display:inline-block;
  }
  #select-background:hover{
 display:inline-block;
 background-color:#c1c1c1;
 height:95px;
 width:95px;
 border-radius:10px;
  }
<div id="select-background"><a href="https://hotmail.com"><img height="75" width="75" src="https://arteminc.github.io/stackoverflow-assets/hotmail.png"/></a></div>
Matt Lipman
  • 152
  • 1
  • 7
  • I am just curious because I know what block and inline is but what is inline-block? – mathmaniac88 Nov 19 '17 at 01:52
  • The best of both worlds :) This [stack answer](https://stackoverflow.com/questions/9189810/css-display-inline-vs-inline-block) explains better than I could – Matt Lipman Nov 19 '17 at 01:57