What's new
HTML Forums | An HTML and CSS Coding Community

Welcome to HTMLForums; home of web development discussion! Please sign in or register your free account to get involved. Once registered you will be able to connect with other members, send and receive private messages, reply to topics and create your very own. Our registration process is hassle-free and takes no time at all!

Animation in the gallery


New member
I'm trying to do a photo gallery. I have this code:
.thumb {
    max-height: 171px;
    border: solid 6px rgba(5, 5, 5, 0.8);

.box {
    position: fixed;
    z-index: 999;
    height: 0;
    width: 0;
    text-align: center;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.8);
    opacity: 0;

.box img {
    max-width: 90%;
    max-height: 80%;
    margin-top: 2%;

.box:target {
    outline: none;
    width: 100%;
    height: 100%;
    opacity: 1;

.box:target img {
    border: solid 17px rgba(77, 77, 77, 0.8);

.light-btn {
    color: #fafafa;
    background-color: #333;
    border: solid 3px #777;
    padding: 5px 15px;
    border-radius: 1px;
    text-decoration: none;
    cursor: pointer;
    vertical-align: middle;
    position: absolute;
    top: 45%;
    z-index: 99;

.light-btn:hover {
    background-color: #111;

.btn-close {
    position: absolute;
    right: 2%;
    top: 2%;
    color: #fafafa;
    background-color: #92001d;
    padding: 10px 15px;
    border-radius: 1px;
    text-decoration: none;

.btn-close:hover {
    background-color: #740404;
<a href="#img1"><img class="thumb" src="https://images.unsplash.com/photo-1556742521-9713bf272865?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=334&q=80"></a>
<a href="#img2"><img class="thumb" src="https://images.unsplash.com/photo-1562657548-fcab42b43035?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=332&q=80"></a>
<a href="#img3"><img class="thumb" src="https://images.unsplash.com/photo-1564249332652-bf435bb2d21f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=353&q=80"></a>

<div class="box" id="img1">
<a href="#img3" class="light-btn btn-prev">prev</a>
<a href="#_" class="btn-close">X</a>
<img src="https://images.unsplash.com/photo-1556742521-9713bf272865?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=334&q=80">
<a href="#img2" class="light-btn btn-next">next</a>

<div class="box" id="img2">
<a href="#img1" class="light-btn btn-prev">prev</a>
<a href="#_" class="btn-close">X</a>
<img src="https://images.unsplash.com/photo-1562657548-fcab42b43035?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=332&q=80">
<a href="#img3" class="light-btn btn-next">next</a>

<div class="box" id="img3">
<a href="#img2" class="light-btn btn-prev">prev</a>
<a href="#_" class="btn-close">X</a>
<img src="https://images.unsplash.com/photo-1564249332652-bf435bb2d21f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=353&q=80">
<a href="#img1" class="light-btn btn-next">next</a>
But I want to add animation. I want the photos to come from the left when I click on "next" and from the right when I click on "prev", like a slider. Is it possible to achieve it with CSS? For example with transform property? If not what script should I use?