HTML CSS Result EDIT ON .carousel-wrapper {
    height: 50px;
    position: relative;
    width: 50px;
    margin: 0 auto;
}

.carousel-item {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 25px 50px;
    opacity: 0;
    transition: all 0.5s ease-in-out;
}

.arrow {
    position: absolute;
    top: 0;
    display: block;
    width: 50px;
    height: 100%;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    background: url("http://dancort.es/assets/img/css-carousel/carousel-arrow-dark.png") 50% 50% / 20px no-repeat;
}

.arrow-prev {
    left: 0;
}

.arrow-next {
    right: 0;
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
}

.light {
    color: white;
}

@media (max-width: 480px) {
    .arrow, .light .arrow {
        background-size: 10px;
        background-position: 10px 50%;
    }
}

}

/*Select every element*/
[id^="item"] {
    display: none;
}

.item-1 {
    z-index: 2;
    opacity: 1;
    background: url('https://static.pexels.com/photos/6526/sea-beach-holiday-vacation-large.jpg');
    background-size: cover;
}

.item-2 {
    background: url('https://static.pexels.com/photos/6506/alcohol-bar-drinks-party-large.jpg');
    background-size: cover;
}

.item-3 {
    background: url('https://static.pexels.com/photos/6529/lake-kajak-kayak-large.jpg');
    background-size: cover;
}

*:target ~ .item-1 {
    opacity: 0;
}

#item-1:target ~ .item-1 {
    opacity: 1;
}

#item-2:target ~ .item-2, #item-3:target ~ .item-3 {
    z-index: 3;
    opacity: 1;
}
}



@media screen and (max-width: 425px) {
    
}