I'm trying to achieve a specific effect with my circular image and overlaying div. I want the overlaying div to only partially shade out the image based on a certain degree value. For example, if I specify 100 degrees, I only want 260 degrees of the circular section to be shaded by the semi-transparent overlay. Despite my efforts, I haven't been able to figure out how to accomplish this.
Below is the CSS code for the overlaying div:
.shade {
position: absolute;
text-align: center;
width: 50px;
height: 50px;
border-radius: 100%;
background-color:#ffffff;
opacity: 0.4
}