An experiment in cleaning up CSS by just avoiding dis-features and focusing on flexbox and CSS grids.
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
fsckcss/public/code/Carousel.css

64 lines
902 B

content {
border: 1px solid #ddd;
display: flex;
flex-direction: column;
flex: flex-grow;
padding: 1rem;
}
carousel {
position: relative;
}
carousel figure {
display: none;
}
carousel figure.active {
display: flex;
position: relative;
flex-direction: column;
}
carousel figure img {
width: 100%;
}
carousel figure figcaption {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
text-align: center;
font-size: 2em;
background: var(--color-bg-secondary);
opacity: 0%;
}
carousel figure figcaption:hover {
opacity: 90%;
}
carousel next,prev {
position: absolute;
bottom: 0;
opacity: 0%;
height: 100%;
display: flex;
flex-direction: column;
align-content: center;
justify-content: center;
}
carousel next {
right: 0;
}
carousel prev {
left: 0;
}
carousel next:hover,prev:hover {
opacity: 60%;
background-color: var(--color-bg);
}