Kevin Powell - Community•2y ago

Background color sizing on img hover

Is there a way I can do something like this as it’s done on Google page whereby the background color is really larger when hovered on the icon??… I can’t find a way around to do it as mine is just taking the size of the icon img on hover. I have placed my codes here but the images doesn’t show up as I have it on my local directory here. I also don’t know how to make it show up here! Can someone help on this?? https://codepen.io/Creatorjihm/pen/gOBZzXe

Creatorjihm

CodePen

gOBZzXe

...

14 Replies

Wolle•2y ago

I would use a pseudo-element for that.

SaagyOP•2y ago

I’ve been stucked on this little thing in the whole Google clone project!🤦🏽‍♂️ How can I get it done…there isn’t a single video to help on the issue…there’s literally nowhere to look again

Unknown User•2y ago

Message Not Public

Wolle•2y ago

.navbar a::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: hsla(0,0%, 100%, 0.3);
  scale: 0;
  transition: scale 300ms;
}
.navbar a:hover::before {
  scale: 1.3;
}

.navbar a::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: hsla(0,0%, 100%, 0.3);
  scale: 0;
  transition: scale 300ms;
}
.navbar a:hover::before {
  scale: 1.3;
}

If you want it round add border-radius: inherit so it has the same as the link. And put position: relative on the link.

SaagyOP•2y ago

I’ve tested this solution but when I hover on the container, the grey color doesn’t show at the back of the img, just on the spaces in the div…i.e color grey is shown around the img only, as if the img is sitting on its own. I’ll test this and give feedback hopefully it’ll work. Sorry to ask but can this be related to my code?? Because after adding it up on my code nothing seems working…could you be more precise on where and how I could add this to my code linking to the img on my nav so it could have that hover effect as shown above?? Please be patient with me as I really need to get this done🙏🏽

Chris Bolson•2y ago

Did you add the line position: relative on your nav links? I have forked your codepen and added the code suggested by @daswolle along with some comments to hopefully help you understand it better https://codepen.io/cbolson/pen/BaqMQgN If you require the background to be a circle you will need to add border-radius: 50% to this pseudo element, however you will also need to ensure that each nav element is a square so that the border-radius trick will create a circle. I have updated my pen to take you closer to what I think you want to achieve. Note - I have added the blue circles as your icon img links are not working on codepen.

SaagyOP•2y ago

Okay…will check it out! Thanks a bunch

Ssadiq Roy•2y ago

Maybe, have the image in square, it’s parent element in square, and increase the parent element’s padding on hover. That might work just same. But make sure box-sizing is not border-box

Chris Bolson•2y ago

If you increase the parent padding that will affect the other siblings and elements on the page (unless it is position absolute). Using a pseudo element avoids this issue as it doesn’t affect the flow.

SaagyOP•2y ago

After much trials, these were my observations!

SaagyOP•2y ago

I tried your forked code and the result was exactly what I wanted but with some twists… Firstly, making use of your “.icon” class didn’t get the result I wanted as it wasn’t tweaking the images to the small width I wanted both of them to be, I don’t know exactly why this was happening but I noticed I had to add separate classes on both of ‘em to tweak their sizes separately but when I hovered, one was larger than the other. I really don’t know if it was due to the fact that I was making use of an img tag instead of linking to some fontawesone icons or maybe the width of the img’s I download weren’t the same. I tried to find out why it wouldn’t blend using same class on both but I couldn’t. Secondly, I observed I had to add these separate classes both inside the link tag and inside the img tag for the result to work because placing them only on the link tag as you’ve instructed wasn’t applying the css on the images but when I added the classes on the img tags, boom, it worked. I wish my img’s could be outputted on my codepen link, you’d have realized all what I’m explaining but I’ll still place my code to see what I did that gave me the result which was close to what I wanted! https://codepen.io/Creatorjihm/pen/YzJgNrb @Chris

Creatorjihm

CodePen

TEMP - nav hover background

...

SaagyOP•2y ago

This simply did the whole trick but as @Chris said, the padding affected the other elements but I actually found out that this was what Google did.🫡

Chris Bolson•2y ago

Firstly, making use of your “.icon” class didn’t get the result I wanted as it wasn’t tweaking the images to the small width I wanted both of them to be, I don’t know exactly why this was happening but I noticed I had to add separate classes on both of ‘em to tweak their sizes separately but when I hovered, one was larger than the other. I really don’t know if it was due to the fact that I was making use of an img tag instead of linking to some fontawesone icons or maybe the width of the img’s I download weren’t the same. I tried to find out why it wouldn’t blend using same class on both but I couldn’t.

Yes, ideally the icons should be the same size. If you have to start customizing each one with padding, heights etc it does get messy and rarely works as you expect.

Secondly, I observed I had to add these separate classes both inside the link tag and inside the img tag for the result to work because placing them only on the link tag as you’ve instructed wasn’t applying the css on the images but when I added the classes on the img tags, boom, it worked.

That is to be expected. My code was just a demonstration. It was always going to require adjusting to suit your actual needs. I'm glad you managed to work that out.

I wish my img’s could be outputted on my codepen link, you’d have realized all what I’m explaining but I’ll still place my code to see what I did that gave me the result which was close to what I wanted!

You can add assets if you have codepen PRO (I don't) however I have just discovered that they do include some free assets such as icons so I will use these next time I want to do this sort of demo.

SaagyOP•2y ago

Thanks a lot for the help!…Much appreciated🙏🏽🫡💯

Gaming

Programming

Background color sizing on img hover