How can I lay one image over another?

Question

I have this HTML layout:

<div class="profile-img">
    <img src="https://via.placeholder.com/150">
</div>

with this CSS

.profile-img, .profile-img > img {
    width: 160px;
    height: 160px;
    border-radius: 50%;
}

Here is my JS Fiddle:

https://jsfiddle.net/wsho4vq7/

What I am trying to do now, is add the attached image to bottom right corner of the circle image....how would I go about that and make the image in the bottom right corner clickable?

pls put the image in the fiddle too :D you can start with "position: absolute; right:0; bottom:0;" — Velimir Tchatchevsky, Nov 19 '18 at 21:30

score 2 · Accepted Answer · answered Nov 19 '18 at 21:33

What I would recommend is placing your secondary image as a child of the .profile-img. From here, give the .camera image position: absolute and the parent .profile-img element position: relative. This will allow you to position the child element at the bottom-right by making use of bottom and right. I've gone with 15px for both in my example, but feel free to adjust to suit. You can also make use of negative values!

To make the image clickable, you can either make use of cursor: pointer (for added effect) along with some custom JavaScript event handlers, or simply wrap the <img> in an <a> tag if you want to redirect.

This can be seen in the following:

.profile-img,
.profile-img > .placeholder {
  width: 160px;
  height: 160px;
  border-radius: 50%;
  position: relative;
}

.camera {
  position: absolute;
  bottom: 15px;
  right: 15px;
}

<div class="profile-img">
  <img class="placeholder" src="https://via.placeholder.com/150">
  <a href="https://www.google.com">
    <img class="camera" src="https://i.stack.imgur.com/lPMJf.png">
  </a>
</div>

How can I lay one image over another?

1 Answers1