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

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

Так что я хочу, как показано ниже .. Как сделать иконку кликабельной при наведении курсора на изображение

.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>

html css

28.12.2018 08:53

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

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

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

665

Перейти к ответу Данный вопрос помечен как решенный

Ответы 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>

Привет, @Tahir Shahzad, все работает нормально, но когда я масштабирую страницу, она сворачивается

— 28.12.2018 11:07

.outer-div-for-imgae-icon я {положение: абсолютное; внизу: 29 пикселей; слева: 15 пикселей; справа: 0 пикселей; сверху: авто; размер шрифта: 40 пикселей; высота: 30 пикселей; ширина: 36%; цвет фона: черный; цвет: #fff; размер шрифта: 12 пикселей; padding: 14px 14px 14px 63px; box-sizing: border-box;}

— 28.12.2018 11:11

@Sundeep Я был немного занят. Надеюсь, вы добились желаемого результата. Дай мне знать, если тебе понадобится помощь.

— 31.12.2018 08:16

28.12.2018 09:16

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

cursor: 'pointer'

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

28.12.2018 10:27

Другие вопросы по теме

Как сделать несколько кнопок чтения на одной странице с помощью одного jquery?

Заполнитель ввода HTML, изменения CSS первой буквы не работают в обновленном браузере

Как оставить настраиваемую полосу прокрутки?

Мне нужно получить доступ / отредактировать HTML-код шаблонов страниц, написанных на PHP, в wordpress

Дата печати дважды

Стилизация кнопки электронной почты в формате HTML для любых почтовых клиентов

Дизайн из следующего css не отображается, как ожидалось, в Mozilla firefox

Как создать нижнюю границу в форме лотка, такую как ввод Android?

Измените размер шрифта, не достигая максимума «Превышена максимальная глубина обновления» в React

Почему я не могу применить рамку к строке углового мат-стола?

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

Ответы 2

Другие вопросы по теме

Похожие вопросы