I am attempting to place a font icon in the top right corner of some images, with the intention of only triggering an event when I click on the icon. However, my current setup causes the entire image to trigger the click event. How can I restructure this to achieve the desired functionality?
<div class="col-3">
<h5>Dashboard Background</h5>
<div class="image">
<div class="icon-image-delete">
<img class="img-thumbnail img-fluid" src="@Url.Action("Render", "Image", new { type = PreferenceImageType.DashboardBackground })" alt="No Background" />
</div>
</div>
</div>
CSS
.icon-image-delete {
position: relative;
vertical-align: middle;
display: inline-block;
}
.icon-image-delete:after {
font-family: FontAwesome;
content: '\f014';
font-size: 20px;
position: absolute;
right: 0;
height: 30px;
width: 30px;
background: #f5f5f5;
color: #ff0000;
cursor: pointer;
border-radius: 2px;
}