CODEWITHSUNDEEP
htmlcss
unknown
unknown

Reputation: 193

how to place button on top right corner of image

The image and buttons are inside a div. How can i make the image occupy the whole div with buttons on the top right corner on the image?

This is the div that contains two buttons and an image. How can i place the two buttons on the top right corner of the image?

enter image description here

I tried to do position:relative;top:25px but the button will behind the image

<div class="image">
    <a href="{{ url('/image/'.$image->id.'/delete') }}">
        <button type="button" class="btn btn-default delete-image-btn pull-right">
            <span class="glyphicon glyphicon-trash"></span>
        </button>
    </a>
    <a href="{{ url('/image/'.$image->id.'/edit') }}">
        <button type="button" class="btn btn-default edit-image-btn pull-right">
             <span class="glyphicon glyphicon-pencil"></span>
         </button>
     </a>
     <img src="{{ $image->image }}" class="img img-responsive full-width">
 </div>

Upvotes: 5

Views: 12044

Answers (4)

Kordonme
Kordonme

Reputation: 2294

.image {
  position: relative;
}

.image .actions {
  right: 1em;
  top: 1em;
  display: block;
  position: absolute;
}

.image .actions a {
  display: inline-block;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<div class="image">
  <div class="actions">
    <a href="{{ url('/image/'.$image->id.'/delete') }}">
        <button type="button" class="btn btn-default delete-image-btn pull-right">
            <span class="glyphicon glyphicon-trash"></span>
        </button>
    </a>
    <a href="{{ url('/image/'.$image->id.'/edit') }}">
        <button type="button" class="btn btn-default edit-image-btn pull-right">
             <span class="glyphicon glyphicon-pencil"></span>
         </button>
     </a>
   </div>
   <img src="https://cdn.pixabay.com/photo/2013/07/12/17/47/test-pattern-152459_960_720.png" class="img img-responsive full-width">
 </div>

Upvotes: 1

Joykal Infotech
Joykal Infotech

Reputation: 1876

Please try this code. Use Position relative and absolute like this:

.image {
  position: relative;
}
.image .delete-image-btn,
.image .edit-image-btn {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1;
}
.image .edit-image-btn {
  margin-right: 40px;
}

Upvotes: 3

Nandita Sharma
Nandita Sharma

Reputation: 13407

Use relative and absolute like shown below to achieve the desired effect.

P.S: I have used T and P to denote the icons as they were not visible in the snippet. 

.image {
  position: relative;
  display: inline-block;
}

.overlay {
  position: absolute;
  right: 0;
  z-index: 5;
}
<div class="image">
  <div class="overlay">
    <a href="{{ url('/image/'.$image->id.'/delete') }}">
      <button type="button" class="btn btn-default delete-image-btn pull-right">
          T<span class="glyphicon glyphicon-trash"></span>
      </button>
    </a>
    <a href="{{ url('/image/'.$image->id.'/edit') }}">
      <button type="button" class="btn btn-default edit-image-btn pull-right">
           P<span class="glyphicon glyphicon-pencil"></span>
       </button>
    </a>
  </div>
  <img src="https://picsum.photos/200" class="img img-responsive full-width">
</div>

Upvotes: 11

Rohan Agarwal
Rohan Agarwal

Reputation: 2609

Though there are many ways, a simple solution would be to give the buttons a z-index property.

.delete-image {
z-index :1;
}

Upvotes: 2

Related Questions