I'm trying to do a photo gallery. I have this code:
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?
Code:
<head>
<style>
.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;
}
</style>
</head>
<body>
<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>
<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>
<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>
</div>
</body>
