JSFiddle - React, Tailwind, and code Playground

by Nick Iaconis

HTML

<div class="slider">
    <div class="img-box">
        <input type="radio" name="slider" id="panel1" checked />
        <img src="http://lorempixel.com/output/nature-q-c-640-480-10.jpg" />
        <input type="radio" name="slider" id="panel2" />
        <img src="http://lorempixel.com/output/people-q-c-640-480-1.jpg" />
        <input type="radio" name="slider" id="panel3" />
        <img src="http://lorempixel.com/output/transport-q-c-640-480-9.jpg" />
    </div>
    <label for="panel1">
        panel 1
    </label>
    <label for="panel2">
        panel 2
    </label>
    <label for="panel3">
        panel 3
    </label>
</div>

CSS

.slider .img-box {
    height: 480px;
    width: 640px;
    position: relative;
}

.slider input[type=radio] {
    display: none;
}

.slider input[type=radio] + img {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity .5s ease, visibility .5s step-end;
}

.slider input[type=radio]:checked + img {
    opacity: 1;
    visibility: visible;
    transition-timing-function: ease, step-start;
}

.slider label {
    cursor: pointer;
}

.slider label:hover {
    color: blue;
}