• HTML
• CSS

HTML

<div class="galeria">
    
    <input type="radio" name="img" checked>
    <input type="radio" name="img">
    <input type="radio" name="img">
    <input type="radio" name="img">
    <input type="radio" name="img">

    <img src="op_1.png" alt="">
    <img src="op_2.png" alt="">
    <img src="op_3.png" alt="">
    <img src="op_4.png" alt="">
    <img src="op_5.png" alt="">

</div>

CSS

.galeria{
    width:230px;
    height:300px;
    margin:0px auto;
    position:relative;
}
.galeria img{
    width:100%;
    height:100%;
    position:absolute;
    top:0px;
    left:0px;
    opacity: 0;
    transition: opacity 3s;
}

.galeria input[type="radio"]{
    width:100%;
    background:#f7f9f9;
    position:relative;
    left:-140px;
    padding:10px 0px;
}

.galeria input[type=radio]:nth-of-type(1):checked ~ img:nth-of-type(1) {
  opacity: 1;
}

.galeria input[type=radio]:nth-of-type(2):checked ~ img:nth-of-type(2) {
  opacity: 1;
}

.galeria input[type=radio]:nth-of-type(3):checked ~ img:nth-of-type(3) {
  opacity: 1;
}

.galeria input[type=radio]:nth-of-type(4):checked ~ img:nth-of-type(4) {
  opacity: 1;
}

.galeria input[type=radio]:nth-of-type(5):checked ~ img:nth-of-type(5) {
  opacity: 1;
}

.galeria input[type=radio]:nth-of-type(6):checked ~ img:nth-of-type(6) {
  opacity: 1;
}