Adding a button over an image

ionic-v1
1

My app uses a profile page with a picture and I’m looking to add a button over the image.

<div class="item" align="center">
            <img width="75%" height"75%" ng-src="data:image/jpeg;base64,{{profile.images.profilePic}}">
            </img>
            <button class="button icon ion-camera" ng-click="upload()"></button>
      </div>

Here’s what I have and I need to know how to put the button over the image instead of underneath.

2

How does it look like now? Can you post a printscreen?

Try to increase the z-index of the button, if that doesn’t work, you can try changing the button’s position to absolute and correctly place it using css.

3

So this is where I am at currently trying your method but doesn’t work for me.

image

<ul class="list">
      <div class="item profilepic-border" align="center">
        <button class="button profilebutton icon ion-camera" ng-click="upload()"></button>
            <img  class="profilepic padding-bottom" ng-src="data:image/jpeg;base64,{{profile.images.profilePic}}" ng-click="upload()">
            </img>
      </div>


.profilebutton{
  z-index: +2;
}

.profilepic{
  width: 65%;
  height: 65%;
}
.profilepic-border{
  background:  #a3a3a3 ;
}
5

Try positioning it as absolute, like this:

<div class="item profilepic-border" align="center">
	<button class="button profilebutton icon ion-camera" ng-click="upload()"></button>
	<img class="profilepic padding-bottom" ng-src="img/ionic.png" ng-click="upload()"></img>
</div>

.profilebutton {
    z-index: 2;
    position: absolute;
    left: 22%;
    top: 8%;
    margin: auto;
}
.profilepic {
	border:1px solid #000;
	width: 65%;
	height: 65%;
}
.profilepic-border {
	position: relative;
	background: #a3a3a3;
}

the result is this:
image

You can use top, bottom, left and right to position it wherever you want.

3 Likes
6

That’s worked great for me thanks!

1 Like
7

Sure buddy, you are welcome.