在不缩放图像的情况下增加 png 图像的背景大小

Question

I trying to make my dropdown menu down arrow(which is a png image) background size larger.

Hereby is what I able to do currently by simple adding background color when I hovered over the div.

What I trying to achieve is making the white circle behind the down arrow LARGER but without scaling or changing the size of my down arrow.

Hereby is my code:

HTML

<div class="right-menu">
    <span class="helper"></span><img src="https://image.flaticon.com/icons/svg/1738/1738760.svg" alt="account" width="40">
    <span class="helper"></span><img id="down-arrow" src="https://image.flaticon.com/icons/svg/271/271210.svg" alt="down-arrow" width="15">
</div>

CSS

.helper {
    display: inline-block;
    height: 100%;
    vertical-align: middle;
} 

.right-menu {
    float: right;
    position: relative;
    height: 100%;
    right: 2%;
}

.right-menu:hover > #down-arrow{
    border-radius: 50%;
    background-color: white;
}

.right-menu img{
    padding: 2px;
    vertical-align: middle;
    max-height: 80%;
    transition: ease 0.2s;
}

**UPDATE: JSFiddle: https://jsfiddle.net/u7qrnjwp/

Answer 1

Something like this?

 body { background: pink; } .helper { display: inline-block; height: 100%; vertical-align: middle; } .right-menu { float: right; position: relative; height: 100%; right: 2%; } .right-menu:hover > #down-arrow{ border-radius: 50%; background-color: white; transition: ease 0.2s; } .icon-account { display: inline-block; } #down-arrow { height: 25px; width: 25px; text-align: center; display: inline-block; } .right-menu img { vertical-align: middle; transition: ease 0.2s; }

 <div class="right-menu"> <div class="icon-account"><span class="helper"></span><img src="data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIj8+=" alt="account" width="40" /></div> <div id="down-arrow"><span class="helper"></span><img src="data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTkuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeD0iMHB4IiB5PSIwcHgiIHZpZXdCb3g9IjAgMCA0OTEuOTk2IDQ5MS45OTYiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDQ5MS45OTYgNDkxLjk5NjsiIHhtbDpzcGFjZT0icHJlc2VydmUiIHdpZHRoPSI1MTJweCIgaGVpZ2h0PSI1MTJweCI+CjxnPgoJPGc++CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+Cjwvc3ZnPgo=" alt="down-arrow" width="15" /></div> </div>

Answer 2

Just need to set padding for the container of icon while hovering:

 .helper { display: inline-block; height: 100%; vertical-align: middle; } .right-menu { float: right; position: relative; height: 100%; right: 2%; } .right-menu:hover > #down-arrow{ border-radius: 50%; background-color: white; padding: 10px } .right-menu img{ padding: 2px; vertical-align: middle; max-height: 80%; transition: ease 0.2s; }

 <div class="right-menu"> <span class="helper"></span><img src="img/account.png" alt="account" width="40"> <span class="helper"></span><img id="down-arrow" src="img/down-arrow.png" alt="down-arrow" width="15"> </div>

Answer 3

Here is what you need to do, It pushes the account image a bit due to the size of the hover hope that is not an issue here?

padding:20px; or you can choose your own padding on the hover .

 body { background-color: gray; margin: 0; padding: 0; } .header { color: white; background-color: pink; height: 60px; } .helper { display: inline-block; height: 100%; vertical-align: middle; } .right-menu { float: right; position: relative; height: 100%; right: 2%; } .right-menu:hover > #down-arrow{ border-radius: 50%; background-color: white; background-size: 200px; padding:20px; } .right-menu img{ padding: 2px; vertical-align: middle; max-height: 80%; transition: ease 0.2s; }

 <div class="header"> <div class="right-menu"> <span class="helper"></span><img src="https://image.flaticon.com/icons/svg/1738/1738760.svg" alt="account" width="40"> <span class="helper"></span><img id="down-arrow" src="https://image.flaticon.com/icons/svg/271/271210.svg" alt="down-arrow" width="15"> </div> </div>