CODEWITHSUNDEEP
cssimagebuttonionic-frameworkionic3
KnowledgeSeeker
KnowledgeSeeker

Reputation: 1088

Ionic how to add button beside an image

I am developing a Ionic 3 app and I want an button with a small add icon beside the image. That looks like this.

enter image description here

Like the small green add icon beside the image.

Here is my html bellow for the image that I had done.

<ion-col col-4>
    <img [src]="image" [hidden]="!image">
    <img src="assets/imgs/avatar-placeholder.png" [hidden]="image">
  </ion-col>

and the scss

img {
    display: block;
    border-radius: 100px;
    border: 1px solid #fff;
    width: 80px;
    height: 80px;
    margin: 30px auto 0;
    box-shadow: 0px 0px 4px rgba(0,0,0,0.7);
    margin-top: 0px;
}

The result below of my image.

enter image description here

I just want the small green add icon like in the first image.

Appreciate if someone could help Thanks in advance.

Upvotes: 0

Views: 1104

Answers (1)

onyx
onyx

Reputation: 1618

Use position: absolute on the icon.

An absolutely positioned element is an element whose computed position value is absolute or fixed. 

div {
  position: relative;
  width: fit-content;
}

div > .icon {
  position: absolute;
  right: 12px;
  bottom: 20px;
  width: 50px;
}
<div>
  <img src="https://www.esparkinfo.com/wp-content/uploads/2016/08/default-avatar.png" alt="">
  <img class="icon" src="https://findicons.com/files/icons/985/affel/128/add.png" alt="">
</div>

Upvotes: 1

Related Questions