Скачать или смотреть Toggle content change with radio buttons HTML CSS vid-09

This video about how to make toggle contents with radio buttons.

BGM~
https://www.bensound.com/royalty-free...
https://www.bensound.com/royalty-free...
https://www.bensound.com/royalty-free...

CSS styles ~
*{
margin: 0;
padding: 0;
}
.wrapper{
width: 100vw;
height: 100vh;
background: #262626;
}
.wrapper .content{
position: relative;
width: 80%;
height: 80%;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
background: #323232;
overflow: hidden;
}
#c1,
.c1{
position: absolute;
width: 50px;
height: 50px;
bottom: 20px;
right: 20px;
z-index: 10;
border: 4px solid #f0f;
}
#c2,
.c2{
position: absolute;
width: 50px;
height: 50px;
bottom: 20px;
right: 80px;
z-index: 10;
border: 4px solid #0ff;
}
#c3,
.c3{
position: absolute;
width: 50px;
height: 50px;
bottom: 20px;
right: 140px;
z-index: 10;
border: 4px solid #f0f;
}
input{
opacity: 0;
}
.c1{
background-image: url(img2.jpg);
background-size: cover;
}
.c2{
background-image: url(img3.jpg);
background-size: cover;
}
.c3{
background-image: url(img4.jpg);
background-size: cover;
}
.c1, .c2, .c3{
pointer-events: none;
border-radius: 50%;
transition: 1s;
}
#c1:checked ~ .c1{
transform: scale(1.8);
border: 4px solid #0ff;
}
#c2:checked ~ .c2{
transform: scale(1.8);
border: 4px solid #f0f;
}
#c2:checked ~ .c2{
transform: scale(1.8);
border: 4px solid #0ff;
}
.imgcont,
.cont{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.cont{
padding: 20px;
z-index: 1;
pointer-events: none;
transition: 0.5s;
opacity: 0;
display: flex;
}
#c1:checked ~ .cont1{
opacity: 1;
transition-delay: 0.5s;
background-image: linear-gradient(135deg, #f0f, transparent);
}
#c2:checked ~ .cont2{
opacity: 1;
transition-delay: 0.5s;
background-image: linear-gradient(135deg, #0ff, transparent);
}
#c3:checked ~ .cont3{
opacity: 1;
transition-delay: 0.5s;
background-image: linear-gradient(135deg, #f0f, transparent);
}
.cont .im{
width: 50%;
height: 100%;
text-align: center;
}
.cont .im img{
height: 100%;
}
.cont .cn{
width: 40%;
height: 90%;
padding: 5%;
}
.cont1 .im,
.cont3 .im{
background-image: linear-gradient(225deg, #0ff, transparent);
}
.cont1 .cn,
.cont3 .cn{
background-image: linear-gradient(135deg, #0ff, transparent);
}
.cont2 .im{
background-image: linear-gradient(225deg, #f0f, transparent);
}
.cont2 .cn{
background-image: linear-gradient(135deg, #f0f, transparent);
}
.imgcont img{
position: absolute;
top: 0;
left: 0;
}
.imgcont h1{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
font-size: 5em;
color: #0ff;
-webkit-text-stroke: 2px #f0f;
}
.cont .cn h1{
color: #262626;
font-size: 40px;
}
.cont .cn p{
font-size: 20px;
line-height: 25px;
font-weight: 700;
}
.cont .cn a{
pointer-events: all;
color: #fff;
background: #262626;
padding: 2%;
text-decoration: none;
}