Closed. This question needs to be more
how to create this type of card using css.
CodePudding user response：
you can create image containing blue box, woman,text and white background (all as one image)
blue box with text positioned by CSS and woman image with transparent background a top of it
transparent woman image with another image (blue box and text) as background-image
CodePudding user response：
One of the tags was bootstrap so I assumed that you are using it. To get the whole effect I used some bootstrap classes to get the basic card and to get the image "outside" a bit just a negative margin.
Check the demo below.
.card-wrapper {
width: 400px;
padding-top: 100px;
margin: 0 auto;
}
.card-body img {
margin-top: -100px;
}
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="card-wrapper">
<div class="card bg-info rounded">
<div class="card-body d-flex justify-content-between align-items-center">
<h3 class="text-white mb-0">Fashion</h3>
<img src="https://via.placeholder.com/150" alt="">
</div>
</div>
</div>
<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" class="snippet-box-edit snippet-box-result" frameborder="0"></iframe>
CodePudding user response：
Pure CSS solution for your problem:
You can change the img as you like
Run the code snippet below
#parent {
position: relative;
height: 250px;
width: 300px;
}
img {
height: auto;
width: 200px;
position: absolute;
bottom: 0;
right: 0;
}
#box {
position: absolute;
width: 100%;
height: 100px;
background-color: #75d6e9;
bottom: 0;
border-radius: 20px;
display: flex;
align-items: center;
}
#box p {
margin-left: 25px;
font-size: 25px;
font-family: sans-serif;
font-weight: bold;
color: #FFF;
}
<div id="parent">
<div id="box">
<p>Fashion</p>
</div>
<img src="https://external-content.duckduckgo.com/iu/?u=https://pngimg.com/uploads/thinking_woman/thinking_woman_PNG11638.png&f=1&nofb=1" alt="">
</div>
<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" class="snippet-box-edit snippet-box-result" frameborder="0"></iframe>
Hope it gives you an idea of how it is working.
It could be improved by making it responsive, but that is not the point of the question.
CodePudding user response：
There are two options:
- Create the blue box as and div element and use position relative on it. Then enter the image inside the div with position absolute top 0 and right 0 and make the image height larger than the box. (The image would be to big and just stands out of the box with no collusion)
- Create a box around everything and use position absolute to position the elements like in the example. (The image would be part of an element)
For more help just comment below :)
