How can I apply opacity to the clip-path/clip area, similar to the image shown below?
Please find my code snippet for reference:
.item--clip .demo {
width: 200px;
height: 250px;
}
.item--clip .has-mask {
position: absolute;
clip: rect(10px, 190px, 190px, 10px);
}
/* Common ------------------------------------------- */
.item {
position: relative;
margin-bottom: 2em;
padding-bottom: 2em;
padding-right: 3em;
border-bottom: 1px solid #DDD;
/* counter-increment: mylist; */
}
.item::before {
/* // content: counter(mylist); */
position: absolute;
right: 0;
top: 0;
font: 2rem/1 Georgia, serif;
color: #EEE;
}
.item::after {
content: '';
display: table;
width: 100%;
}
.demo {
position: relative;
float: left;
margin-right: 30px;
}
.demo::before {
content: '';
display: block;
position: absolute;
z-index: -2;
top: 0;
right: 0;
bottom: 0;
left: 0;
opacity: 0;
transition: .7s;
}
.text {
padding-left: 230px;
}
.item:hover ::before {
opacity: .4;
}<div class="wrapper">
<div class="item item--clip">
<div class="demo">
<img src="https://img-fotki.yandex.ru/get/5607/5091629.6b/0_612e6_b9039c0d_M.jpg" alt="" class="has-mask" />
</div>
</div>
</div>