Увеличьте размер фона PNG изображения без масштабирования изображения

Question

Я пытаюсь увеличить размер фона в раскрывающемся меню со стрелкой вниз (это изображение в формате png).

Теперь я могу сделать это, просто добавив цвет фона при наведении курсора на элемент div.

Я пытаюсь сделать белый круг за стрелкой вниз БОЛЬШОЙ , но без масштабирования или изменения размера моего стрелка вниз.

Здесь мой код:

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;
}

** ОБНОВЛЕНИЕ: JSFiddle: https://jsfiddle.net/u7qrnjwp/

Answer 1

Как то так?

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+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBoZWlnaHQ9IjUxMnB4IiB2aWV3Qm94PSIwIDAgNTEyIDUxMiIgd2lkdGg9IjUxMnB4Ij48cGF0aCBkPSJtNTEyIDI1NmMwLTE0MS40ODgyODEtMTE0LjQ5NjA5NC0yNTYtMjU2LTI1Ni0xNDEuNDg4MjgxIDAtMjU2IDExNC40OTYwOTQtMjU2IDI1NiAwIDE0MC4yMzQzNzUgMTEzLjUzOTA2MiAyNTYgMjU2IDI1NiAxNDEuODc1IDAgMjU2LTExNS4xMjEwOTQgMjU2LTI1NnptLTI1Ni0yMjZjMTI0LjYxNzE4OCAwIDIyNiAxMDEuMzgyODEyIDIyNiAyMjYgMCA0NS41ODU5MzgtMTMuNTU4NTk0IDg5LjQwMjM0NC0zOC43MDMxMjUgMTI2LjUxNTYyNS0xMDAuOTY4NzUtMTA4LjYwOTM3NS0yNzMuNDQxNDA2LTEwOC44MDQ2ODctMzc0LjU5Mzc1IDAtMjUuMTQ0NTMxLTM3LjExMzI4MS0zOC43MDMxMjUtODAuOTI5Njg3LTM4LjcwMzEyNS0xMjYuNTE1NjI1IDAtMTI0LjYxNzE4OCAxMDEuMzgyODEyLTIyNiAyMjYtMjI2em0tMTY4LjU4NTkzOCAzNzYuNWM4OS43NzM0MzgtMTAwLjY5NTMxMiAyNDcuNDIxODc2LTEwMC42NzE4NzUgMzM3LjE2Nzk2OSAwLTkwLjA3NDIxOSAxMDAuNzczNDM4LTI0Ny4wNTQ2ODcgMTAwLjgwNDY4OC0zMzcuMTY3OTY5IDB6bTAgMCIgZmlsbD0iIzAwMDAwMCIvPjxwYXRoIGQ9Im0yNTYgMjcxYzQ5LjYyNSAwIDkwLTQwLjM3NSA5MC05MHYtMzBjMC00OS42MjUtNDAuMzc1LTkwLTkwLTkwcy05MCA0MC4zNzUtOTAgOTB2MzBjMCA0OS42MjUgNDAuMzc1IDkwIDkwIDkwem0tNjAtMTIwYzAtMzMuMDg1OTM4IDI2LjkxNDA2Mi02MCA2MC02MHM2MCAyNi45MTQwNjIgNjAgNjB2MzBjMCAzMy4wODU5MzgtMjYuOTE0MDYyIDYwLTYwIDYwcy02MC0yNi45MTQwNjItNjAtNjB6bTAgMCIgZmlsbD0iIzAwMDAwMCIvPjwvc3ZnPgo=" 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+CgkJPHBhdGggZD0iTTQ4NC4xMzIsMTI0Ljk4NmwtMTYuMTE2LTE2LjIyOGMtNS4wNzItNS4wNjgtMTEuODItNy44Ni0xOS4wMzItNy44NmMtNy4yMDgsMC0xMy45NjQsMi43OTItMTkuMDM2LDcuODZsLTE4My44NCwxODMuODQ4ICAgIEw2Mi4wNTYsMTA4LjU1NGMtNS4wNjQtNS4wNjgtMTEuODItNy44NTYtMTkuMDI4LTcuODU2cy0xMy45NjgsMi43ODgtMTkuMDM2LDcuODU2bC0xNi4xMiwxNi4xMjggICAgYy0xMC40OTYsMTAuNDg4LTEwLjQ5NiwyNy41NzIsMCwzOC4wNmwyMTkuMTM2LDIxOS45MjRjNS4wNjQsNS4wNjQsMTEuODEyLDguNjMyLDE5LjA4NCw4LjYzMmgwLjA4NCAgICBjNy4yMTIsMCwxMy45Ni0zLjU3MiwxOS4wMjQtOC42MzJsMjE4LjkzMi0yMTkuMzI4YzUuMDcyLTUuMDY0LDcuODU2LTEyLjAxNiw3Ljg2NC0xOS4yMjQgICAgQzQ5MS45OTYsMTM2LjkwMiw0ODkuMjA0LDEzMC4wNDYsNDg0LjEzMiwxMjQuOTg2eiIgZmlsbD0iIzAwMDAwMCIvPgoJPC9nPgo8L2c+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

Просто нужно установить отступ для контейнера иконки при наведении курсора:

.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

Вот что вам нужно сделать. Это немного толкает изображение account из-за размера hover Надеюсь, что здесь нет проблем?

padding:20px; или вы можете выбрать ваш собственный отступ на 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>