I have a div like this:
<div >
<div ><img src="https://nanoclub.ir/images/cut.png"></div>
</div>
And result goes like this:
However, it should be showing inside the div like this:
And here is the CSS:
.mainInfo{
background-color: #fff;
border: .01rem round #e0e1ed;
border-radius: 20px;
color: #585CA1;
height:50px;
}
.circle {
position:absolute;
width:150px;
height:170px;
border-radius:50%;
background:#fff;
right:100px;
top:40%;
transform:translateY(-50%);
}
So how can I place the image inside circle
div properly like the expected image?
CodePudding user response:
I achieved this by absolute
positioning and ::before
selector. Also I added border radius to the image with a max width.
HTML:
<div >
<div >
<img src="https://picsum.photos/200" />
</div>
</div>
CSS:
.mainInfo{
background-color: #fff;
border: .01rem round #e0e1ed;
border-radius: 20px;
color: #585CA1;
width:100%;
height:5em;
box-shadow: 0px 0px 17px -5px rgba(0,0,0,0.75);
margin-top: 3em;
display: flex;
align-items: center;
justify-content: center;
}
.circle {
position: relative;
width: 8em;
height: 8em;
background: #fff;
border-radius: 50%;
box-shadow: 0px 0px 17px -5px rgba(0,0,0,0.65);
}
.circle:before{
position: absolute;
content: "";
width: 15em;
height: 5em;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: #fff;
}
.circle img {
position: absolute;
max-width: 85%;
border-radius: 50%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 200;
}