CODEWITHSUNDEEP
htmlcssionic-framework
Abdel P.
Abdel P.

Reputation: 738

Button over profile photo

How can I add a button over profile photo like facebook app using html and css? I'm using ion-avatar in Ionic 3enter image description here

this is my code:

  <ion-item no-lines>
    <ion-avatar>
      <img src="http://www.sclance.com/pngs/png-avatar/png_avatar_1048927.png">
    </ion-avatar>
  </ion-item>

css:

ion-avatar img  {
    width:100% !important;
    height : 100% !important;
    max-width: 150px !important;  //any size
    max-height: 150px !important; //any size
    margin: auto;
    }

Upvotes: 5

Views: 7693

Answers (2)

Piyush Marvaniya
Piyush Marvaniya

Reputation: 2542

Try this click on upload icon

CLICK HERE

.rounded-box {
  width: 150px;
  height: 150px;
  display: block;
  margin: 0 auto;
}

.outer {
  width: 100% !important;
  height: 100% !important;
  max-width: 150px !important; /* any size */
  max-height: 150px !important; /* any size */
  margin: auto;
  background-color: #6eafd4;
  border-radius: 100%;
  position: relative;
  }

.inner {
  background-color: #ff1414;
  width: 50px;
  height: 50px;
  border-radius: 100%;
  position: absolute;
  bottom: 0;
  right: 0;
}

.inner:hover {
  background-color: #5555ff;
}
.inputfile {
    opacity: 0;
    overflow: hidden;
    position: absolute;
    z-index: 1;
    width: 50px;
    height: 50px;
}
.inputfile + label {
    font-size: 1.25rem;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: inline-block;
    overflow: hidden;
    width: 50px;
    height: 50px;
    pointer-events: none;
    cursor: pointer;
    line-height: 50px;
    text-align: center;
}
.inputfile + label svg {
    fill: #fff;
}

<div class="rounded-box">
  <div class="outer">
    <div class="inner">
    <input class="inputfile" type="file" name="pic" accept="image/*">
    <label><svg xmlns="http://www.w3.org/2000/svg" width="20" height="17" viewBox="0 0 20 17"><path d="M10 0l-5.2 4.9h3.3v5.1h3.8v-5.1h3.3l-5.2-4.9zm9.3 11.5l-3.2-2.1h-2l3.4 2.6h-3.5c-.1 0-.2.1-.2.1l-.8 2.3h-6l-.8-2.2c-.1-.1-.1-.2-.2-.2h-3.6l3.4-2.6h-2l-3.2 2.1c-.4.3-.7 1-.6 1.5l.6 3.1c.1.5.7.9 1.2.9h16.3c.6 0 1.1-.4 1.3-.9l.6-3.1c.1-.5-.2-1.2-.7-1.5z"></path></svg></label>
    </div>
  </div>
</div>

Upvotes: 2

tonk
tonk

Reputation: 96

The key here is relative and absolute positioning.

If you give a parent container with your equivalent of the profile picture the CSS property position: relative; and your avatar the property position: absolute; you can then use properties such as bottom: 0; and right: 0; to specify absolute offset from the parent container.

A very basic implementation of this CSS is below, and at this jsfiddle with more detail: https://jsfiddle.net/na8956qd/1/

I used your provided CSS, but it's unclear what you're applying that class to exactly. Feel free to adapt as necessary!

.outer {
  width: 100% !important;
  height: 100% !important;
  max-width: 150px !important; /* any size */
  max-height: 150px !important; /* any size */
  margin: auto;
  background-color: red;
  border-radius: 100%;
  position: relative;
  }

.inner {
  background-color: #0000ff;
  width: 50px;
  height: 50px;
  border-radius: 100%;
  position: absolute;
  bottom: 0;
  right: 0;
}

Upvotes: 6

Related Questions