CODEWITHSUNDEEP
htmlcss
Sundeep
Sundeep

Reputation: 179

How to make Clickable Icon on Image hover

At present It was bule colour icon on Image... I want a clicable Icon when over on Image for example check 2nd Image enter image description here

So I want Like below Image.. enter image description here 

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

Upvotes: 0

Views: 1179

Answers (2)

Tahir Shahzad
Tahir Shahzad

Reputation: 649

I am adding code below for reference. You can change look and feel using CSS rules.

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

Upvotes: 1

amdev
amdev

Reputation: 7432

all you need to add this to icon or event better way to the element that holds it:

cursor: 'pointer'

to make it to be appear like a clickable element, but please be aware that all login about clicking ( like what should happen when the button been cliked ) would be handled with javascript and css is a way to style the lements

Upvotes: 0

Related Questions