Struggling with fading out an image that's circular in shape due to the border-radius: 50%.
<section id="main">
<h1>Non-Important-Text</h1>
<h4>
it's all fun and games until you can't find a damn solution....
</h4>
<div id="img-container">
<img src="./assets/1.jpg" />
</div>
</section>
/* ... */
#main #img-container {
border-radius: 50%;
display: inline-block;
position: relative;
}
#main #img-container img {
width: 30em;
border-radius: 50%;
display: block;
border: 1px solid white;
}
#main #img-container img::after {
content: "";
display: block;
background: radial-gradient(
ellipse at center,
rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 1) 100%
); /* This doesn't work! */
border-radius: 50%;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
Despite setting up my circular image with a border, I struggle with achieving a faded effect in a circular manner. Any suggestions?
Aim: https://i.stack.imgur.com/68If5.png
Current Outcome: https://i.stack.imgur.com/P58gN.png
I've experimented with various approaches such as using radial-gradient, -webkit-gradient, and even -webkit-radial-gradient. However, the results remain unchanged!