I want unclickable overlay on the top of the image
codepen link on the comment section
html:
<img src="https://www.codeproject.com/KB/GDI-plus/ImageProcessing2/img.jpg" />
css:
img{
width:100px;
height:100px;
cursor: not-allowed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0,0,0,0.5);
z-index: 1000;
}
with grey opacity on the top of the image
something like this https://prnt.sc/10pm4zm
<div class="container">
<img src="https://www.codeproject.com/KB/GDI-plus/ImageProcessing2/img.jpg" />
<div class="overlay"></div>
</div>
And css to be
img {
width: 100px;
height: 100px;
}
.container {
width: 100px;
height: 100px;
position: relative;
pointer-events: none;
}
.overlay {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background: rgba( 0, 0, 0, 0.5 );
}
You can add another div after the tag. and give it the css as follows
img{ width:100px; height:100px; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0,0,0,0.5); } div{ position:absolute; width:50px; height:30px; cursor: not-allowed; top: 80px; left: 10px; right: 0; bottom: 0; background-color: grey; z-index: 1000; opacity: 0.5; }
<img src="https://www.codeproject.com/KB/GDI-plus/ImageProcessing2/img.jpg" /> <div></div>
Furthermore you can adjust opacity and the size of the overlay unclickable div accordingly
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.