CODEWITHSUNDEEP
htmlcss
Robert Jones
Robert Jones

Reputation: 408

How to move the background image to center away from border on hover?

I'm working on my code to set up the border for the background image when I hover on the image. I have got a problem with the image that get too close to the border when I hover on the image. I want to move the image to the center just like this:

https://i.sstatic.net/jwozs.png

Here is the jsfiddle: https://jsfiddle.net/05xq2b3m/

I have tried each of these:

padding-left: 4px;
background-position: center center;
background-position: 2px;
margin-left: 2px;

It wont do anything as the background image will stay close to the border when I hover on the image. I have tried to find the answers on google but I am unable to find the solution.

Here is the full code:

.a8r {
  margin-top: 12px;
  margin-left: 11px;
  height: 28px;
  width: 28px;
  border: none;
  display: inline-block;
}

.e1f600 {
  background: no-repeat url(https://ssl.gstatic.com/chat/emoji/png28-7f9d3a5045813584f828fe69a1fecb77.png) 0 -11223px;
}

.e1f600:hover {
  -webkit-border-radius: 2px;
  border-radius: 2px;
  box-shadow: 0 0 3px 2px rgba(0, 0, 0, .15);
  width: 32px;
  height: 30px;
  background-position: center center;
}
<button aria-label="grinning face" string="1f600" class="e1f600 a8r">

What I am expecting to achieve is I want to set the background image to be in the center that is not too close to the border when I hover on the image.

Can you please show me an example how I can set the background image that don't get too close to the border when I hover on the image?

Thank you.

Upvotes: 0

Views: 90

Answers (1)

StrongLucky
StrongLucky

Reputation: 588

  1. Change the background position
  2. Give your element a background color
  3. Set the size of your element in not hover style

See it in seperate lines. You will understand it more this way. Feel free to optimize or minimize it.

.e1f600 { 
   background-image: url(https://ssl.gstatic.com/chat/emoji/png28-7f9d3a5045813584f828fe69a1fecb77.png);
   background-position: center -11222px;
   background-repeat: no-repeat;
   background-color: transparent;
   width: 32px;
   height: 32px;
}

.e1f600:hover {
    -webkit-border-radius: 2px;
    border-radius: 2px;
    box-shadow: 0 0 3px 2px rgba(0,0,0,.15);
}

Upvotes: 1

Related Questions