<div class="wrapper">
<div class="img__wrapper">
<img src="https://www.w3cplus.com/sites/default/files/blogs/2020/2004/css-circle-image-2.jpg" alt="">
</div>
<div class="img__wrapper">
<img src="https://www.w3cplus.com/sites/default/files/blogs/2020/2004/cat-toes-paw-number-paws-tiger-tabby.jpg" alt="">
</div>
</div>
<div class="control">
<label for="check">
<input type="checkbox" name="check" id="check">border
</label>
</div>
@import url("https://fonts.googleapis.com/css?family=Gochi+Hand");
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
width: 100vw;
height: 100vh;
margin: 0;
padding: 0;
background-color: #291642;
font-family: "Gochi Hand", sans-serif;
font-size: 130%;
letter-spacing: 0.1rem;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
div {
display: flex;
justify-content: center;
align-items: center;
margin: 5vmin;
}
label {
display: flex;
align-items: center;
color: #fff;
line-height: 1;
}
input {
margin: 0 5px 0 0;
position: relative;
top: -0.1em;
}
.img__wrapper {
width: 30vmin;
height: 30vmin;
border-radius: 50%;
overflow: hidden;
}
img {
max-width: 100%;
height: auto;
object-fit: cover;
object-position: center;
border-radius: 50%;
}
View Compiled
const checkEle = document.querySelector("#check");
const imgWrapper = document.querySelectorAll(".img__wrapper");
checkEle.addEventListener("click", (e) => {
if (e.target.checked) {
imgWrapper.forEach((img) => {
console.log(img);
img.style.border = "5px solid #f36";
});
} else {
imgWrapper.forEach((img) => {
console.log(img);
img.style.border = "none";
});
}
});
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.