Examining this snippet of HTML:
<div _ngcontent-c1="" class="attach">
<div _ngcontent-c1="" class="image">
<img _ngcontent-c1="" id="0" src="...">
</div>
<i _ngcontent-c1="" class="fa fa-trash"></i>
</div>
Accompanied by the following SCSS code:
.attach {
display: inline-block;
i {
position: relative;
right: 50%;
opacity: 0;
z-index: 2;
padding: .5em;
color: #efefef;
background: gray;
border-radius: 3em;
}
.image {
display: inline-block;
}
img {
z-index: 1;
border-radius: 1em;
width: 100px;
height: 100px;
}
}
.attach:hover {
cursor: pointer;
filter: brightness(80%);
i {
opacity: 1;
}
}
The concern is that the size of the attach div is expanding. There is an image example here: https://i.sstatic.net/8W4Yd.png
Another reference image can be found here: https://i.sstatic.net/e37xY.png
Thus, the question arises on how to prevent the enlargement of the div?