struggling to give shape to div same as image shape - html

Question

I have one image with drop-shadow and I want text at the bottom of the image with overlay class named img_text which takes the same shape as image. I don't know how to create this.
Can anyone help me how to achieve this?
Here I have attached what I want.
Here is my code in pen that I have done.

Answer 1

The issue is, a child element cannot be related to it's parents background, the two shapes are independent of each other.
This is a classical HTML challenge, when table layouts were pulled together with interactive effects, to use more images in more colourful images with Photoshop filters applied to text menu items or gifs.
As Basil suggested an additional image could provide the illusion that the two shapes are related, alternatively the base image could look as required, then only one line of label may be provided.
This CSS may be applied:
backdrop-filter: sepia(.9) hue-rotate(0deg)
Rather than the background on .images_div .img_text
Play around with the hue-rotate to see if you can make the same orange.

Answer 2

The only way to achieve this is by using an image background that have the same shape with less opacity like this one instead of this background-color: rgba(0,0,0,0.5);.

Answer 3

You can try this code
CSS code
* {
box-sizing: border-box;
}
.container {
position: relative;
}
.container p {
position: absolute;
bottom: 0px;
left: 0px;
right: 0px;
overflow: hidden;
background-color: rgba(0,0,0,0.5);
color: #F2F2F2;
font-size: 22px;
text-align: center;
background-color: red;
width: 180px;
display: block;
padding: 10px 15px;
text-align: center;
text-transform: uppercase;
color: #fff;
}
.container .image_sec_img p:hover{
background-color: rgba(248,105,60,0.75);
}
.one{
margin-left: 16px;
}
and the html code
<div class="container">
<div class="image_sec_img">
<img src="https://i.stack.imgur.com/Xcapo.png">
<p class="one">Hello</p>
</div>
</div>

Answer 4

Try to implement this way.
.image_box {
display: inline-block;
clip-path: polygon(0% 100%, 0% 5%, 10% 3%, 20% 1.7%, 35% 0.4%, 50% 0%, 65% 0.4%, 80% 1.7%, 90% 3%, 100% 5%, 100% 93%, 90% 95.7%, 80% 97.7%, 70% 99.2%, 60% 99.9%, 50% 100%, 40% 99.3%, 30% 97.7%, 20% 95.9%, 10% 95.3%, 0% 96%);
padding: 0px 0px 4px 5px;
position: relative;
}
.image_box:before {
background-color: #f8693c;
left: 0px;
top: 20px;
bottom: 0;
right: 5px;
position: absolute;
content: "";
}
.content {
position: absolute;
bottom: 0;
left: 0px;
right: 0px;
background-color: rgba(248, 105, 60, 0.9);
color: #fff;
padding: 15px 15px 30px 25px;
clip-path: polygon(0% 0%, 100% 0%, 100% 93%, 90% 95.7%, 80% 97.7%, 70% 99.2%, 60% 99.9%, 50% 100%, 40% 99.3%, 30% 97.7%, 20% 95.9%, 10% 95.3%, 0% 96%);
}
.image_box img {
display: block;
clip-path: polygon(0% 100%, 0% 5%, 10% 3%, 20% 1.7%, 35% 0.4%, 50% 0%, 65% 0.4%, 80% 1.7%, 90% 3%, 100% 5%, 100% 93%, 90% 95.7%, 80% 97.7%, 70% 99.2%, 60% 99.9%, 50% 100%, 40% 99.3%, 30% 97.7%, 20% 95.9%, 10% 95.3%, 0% 96%);
}
<div class="image_box">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT6lRhSay69skaUU-y9M7J_drwez_QBJTPholjizBmGbfJbLYVH&s">
<div class="content">
Image Title
</div>
</div>
Hope this will works fine for you.
Thank you...

Answer 5

here you go miss Akshita sorry for my side
css
.cont1 {
display: inline-block;
clip-path: polygon(0% 100%, 0% 5%, 10% 3%, 20% 1.7%, 35% 0.4%, 50% 0%, 65% 0.4%, 80% 1.7%, 90% 3%, 100% 5%, 100% 93%, 90% 95.7%, 80% 97.7%, 70% 99.2%, 60% 99.9%, 50% 100%, 40% 99.3%, 30% 97.7%, 20% 95.9%, 10% 95.3%, 0% 96%);
padding: 0px 0px 4px 5px;
position: absolute;
}
.cont1:before {
background-color: #f8693c;
left: 0px;
top: 40px;
bottom: 0;
right: 5px;
position: absolute;
content: "";
}
.text1{
position: absolute;
bottom: 0;
left: 0px;
right: 0px;
background-color: rgba(248, 105, 60, 0.9);
color: #fff;
text-align: center;
padding: 15px 15px 30px 25px;
clip-path: polygon(0% 0%, 100% 0%, 100% 93%, 90% 95.7%, 80% 97.7%, 70% 99.2%, 60% 99.9%, 50% 100%, 40% 99.3%, 30% 97.7%, 20% 95.9%, 10% 95.3%, 0% 96%);
}
.cont1 img {
display: block;
clip-path: polygon(0% 100%, 0% 5%, 10% 3%, 20% 1.7%, 35% 0.4%, 50% 0%, 65% 0.4%, 80% 1.7%, 90% 3%, 100% 5%, 100% 93%, 90% 95.7%, 80% 97.7%, 70% 99.2%, 60% 99.9%, 50% 100%, 40% 99.3%, 30% 97.7%, 20% 95.9%, 10% 95.3%, 0% 96%);
}
html
<div class="cont1">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT6lRhSay69skaUU-y9M7J_drwez_QBJTPholjizBmGbfJbLYVH&s">
<div class="text1">
Hello
</div>
</div>