Slideshowbob.css

The evil, fumbling, JavaScript free, slide thingy

Die Bart Die

Using the power of :checked and inputs
we can create a slide based system.

It's just HTML and CSS

Embed code, images or even switch the background with animated gifs

Gifs

Manically laugh with amazing gif backgrounds

Show off code

#slideshowbob4:checked ~ .slideshowbob__container .slideshowbob__slide:nth-child(4):after {
    content: "";
    background: url(../img/manical.gif) 0 0 no-repeat;
    background-size: cover;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    opacity: 0.3;
}

Change up the transition

Scale it

Back to normal

Uses SASS

Makes it so much easier to generate for how many slides you need

Check it out on github

With ❤ Ryan Seddon

Building things with :checked before it was cool.