<figure>
<img src="https://picsum.photos/300/300?random=5" alt="">
</figure>
<button class="button button--toggle">Toggle Class</button>
@import url("https://fonts.googleapis.com/css2?family=Exo:wght@600&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
width: 100vw;
min-height: 100vh;
font-family: "Exo", Arial, sans-serif;
background-color: #557;
color: #fff;
display: grid;
place-content: center;
grid-template-columns: 1fr;
padding: 1rem;
gap: 1rem;
}
.button {
--background-color: #1b86f9;
background-color: var(--background-color);
border: none;
color: #fff;
border-radius: 8px;
padding: 1em 2em;
box-shadow: 0 0 0.2em var(--background-color);
cursor: pointer;
font-family: "Exo", Arial, sans-serif;
transition: all 0.28s ease-in-out;
justify-self: center;
}
.button:focus,
.button:hover {
--background-color: #3f51b5;
}
figure {
width: min(100%, 600px);
aspect-ratio: 16 / 9;
border: 10px solid rgb(245 23 43 / 0.5);
position: relative;
justify-self: center;
transition: all 0.3s linear;
}
figure img {
width: 200px;
aspect-ratio: 1;
transition: all 0.3s linear;
filter: hue-rotate(145deg) opacity(0.65);
transform-origin: center;
position: absolute;
top: 50%;
left: 50%;
}
.center img {
transform: translate(-50%, -50%);
mix-blend-mode: color-burn;
}
figure {
background: url("https://picsum.photos/300/300?random=2") 0 0 / 200px 200px
no-repeat,
linear-gradient(to bottom, #09f, #90f, #23a) 0 0 / 200px 200px no-repeat;
background-blend-mode: overlay;
}
.center {
background-position: center;
}
const clickHandler = document.querySelector(".button");
const toggleTarget = document.querySelector("figure");
clickHandler.addEventListener("click", () => {
toggleTarget.classList.toggle("center");
});
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.