Mask a circle image surrounding another image in CSS

user_11245034 0
Viewed 124

I need to make an effect using HTML and CSS only with a circle image surrounding another image.

Here is what I'm trying to achieve:

enter image description here

On this example, the circle is an SVG image. The center image is a PNG with a border-radius.

I think the best way would be to use the top half of the main image as a mask for the circle image. I looked for the mask and the clip-path properties, but without success.

Here is my code so far:

<div class="main-image">
    <div class="image-container">
        <img src="uploads/main_image.png">
    </div>
    <div class="outline-circle"></div>
</div>

.image-container {
  position: relative;
  border-radius: 9999px;
  overflow: hidden;

  img {
    width: 30vw;
    max-width: 500px;
  }
}

.outline-circle {
  position: absolute;
  top: 0;
  left: 0;
  background-image: url(../img/circle_1.svg);
  height: 100%;
  width: 600px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

But with this code, the circle is simply positioned on top of the image:

enter image description here

Thanks for your help,

css image html
1 Answers

You can try like below:

.box {
  display: inline-block;
  position: relative;
  margin: 10px 50px;
  transform-style: preserve-3d; /* this is important */
}

.box:before {
  content: "";
  position: absolute;
  inset: auto -40px;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 5px solid;
  border-color: blue green red blue;
  transform: rotate(16deg) rotateX(41deg); /* play with this */
}

img {
  border-radius: 999px;
}
<div class="box">
  <img src="https://picsum.photos/id/1069/200/300">
</div>

user_86203330
Related