Как сделать кликабельную иконку при наведении изображения

Question

В настоящее время это был булевый цветной значок на изображении ... Я хочу кликабельную иконку, когда над изображением, например, отметьте 2-е изображение

Так что я хочу Мне нравится Изображение ниже..

.outer-div-for-the-imgae-icon{position:unset; display:block;  width:100%; height:auto;   }

.outer-div-for-the-imgae-icon img{max-height:300px; width:100%; max-width:300px; height:auto; position : relative;  object-fit:cover;}

.outer-div-for-the-imgae-icon i{position:absolute; top:0; left:100%; font-size:40px;}

<div class="outer-div-for-the-imgae-icon">
                            <app-image [imagesrc]="imagePath" style="width : 38%; margin-top: 30px;"
                                class="d-none d-sm-block" alt="..."></app-image>
                            <i (click)="openImageUploadModal(content)" style="color : white;left:37%; 
                            position: absolute; top: 24px; padding: 3px; background-color:#0076C8; 
                            border-radius: 50%;font-size: 12px;"
                                class="fa fa-pencil fa-lg" aria-hidden="true"></i>
                        </div>

Answer 1

все, что вам нужно, чтобы добавить это к значку или событию, лучше для элемента, который его содержит:

cursor: 'pointer'

, чтобы сделать его похожим на интерактивный элемент, но имейте в виду, что все пользователинажатие (например, что должно произойти, когда кнопка была нажата) будет обрабатываться с помощью javascript, а css - это стиль стилей элементов

Answer 2

Я добавляю код ниже для справки.Вы можете изменить внешний вид, используя правила CSS.

.outer-div-for-the-imgae-icon{position:relative; display:block;  width:300px; height:300px; background-color:#efefef  }

.outer-div-for-the-imgae-icon img{max-height:300px; width:100%; max-width:300px; height:auto; position : relative;  object-fit:cover;}

.outer-div-for-the-imgae-icon i{position:absolute; bottom:0px; left:0px;right:0px;top:auto; font-size:40px;height:100px;width:100%;background-color:rgba(0,0,0,0.3); color:#fff; font-size:12px; line-height:25px; padding:25px;box-sizing:border-box;}

<div class="outer-div-for-the-imgae-icon">
                            <app-image [imagesrc]="imagePath" style="width : 38%; margin-top: 30px;"
                                class="d-none d-sm-block" alt="..."></app-image>
                            <i (click)="openImageUploadModal(content)" style=""
                                class="fa fa-pencil fa-lg" aria-hidden="true">Edit Profile Picture</i>
                        </div>