img {
border: 1px solid #000000;
opacity: 0.3
}
img.active {
opacity: 1;
}<img src="https://cs9.pikabu.ru/post_img/2020/10/24/5/1603519896153419851.jpg">document.querySelectorAll('img').forEach(img => {
img.addEventListener('click', (e) => {
e.target.classList.toggle('active')
})
})<div class="container"></div>.container {
position: relative;
width: 500px;
height: 500px;
background-color: #c4c4c4;
}
.container::after {
content: "";
position: absolute;
top: 0;
right: 0;
width: 250px;
height: 250px;
border-top: 3px solid #00ff00;
border-right: 3px solid #00ff00;
}