CODEWITHSUNDEEP
htmlcss
JimmB
JimmB

Reputation: 25

Increasing the Background Color Height on Hover

I'm making a static HTML web page using html5-boilerplate_v8, and have hit a roadblock.

I've added 4 social media icons using PNGs with transparent backgrounds, and I want the background of an image to become white when hovered over.

Right now, the HTML for one icon looks like this:

<div class="channels">
      <a class="channels__item" href="https://www.facebook.com/person.name" target="_blank"><img
          src="img/icons8-facebook-50.png" alt="facebook" width=40 height=40></a>

And the CSS looks like this:

.channels {
  margin: 0 auto;
  padding-top: 10px;
}

.channels__item {
  margin-left: 5px;
  margin-right: 5px;
}

.channels__item:hover {
  background-color: #fff;
}

What's happening is that when I hover over the icon, the width is correct but the height is only about half of the icon (while being centered over the middle of the icon).

Instead, I need the height to stretch from the top to the bottom of the icon, consistent with how the width is behaving.

I've seen similar questions asked with navigation menus (set up as unordered lists), but as you can see my scenario should be much simpler...

Sadly, after various attempts, the only thing that had any effect was adding a padding of 10px to the hover state. This actually looked okay, but it caused the icons to shift horizontally when hovered over (which looks ridiculous). Also, it feels hacky and I'm sure there must be a better way.

I'm pretty sure this height is following a text size rather than the icon size, but for some reason I can't figure out how to fix it. Thanks for any advice!

Upvotes: 0

Views: 60

Answers (1)

Hansaka Sandaruwan
Hansaka Sandaruwan

Reputation: 521

Use display: inline-block; in .channels__item class. more about display tag here 

.channels {
  margin: 0 auto;
  padding-top: 10px;

}

.channels__item {
  margin-left: 5px;
  margin-right: 5px;
    display: inline-block;
}

.channels__item:hover {
  background-color: rgb(209, 32, 32);
}
<div class="channels">
    <a class="channels__item" href="https://www.facebook.com/person.name" target="_blank"><img
          src="https://image.flaticon.com/icons/svg/1312/1312139.svg" alt="facebook" width=40 height=40></a>
        <p>
</div>

Upvotes: 1

Related Questions