<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<span class="slider" id="slider1"></span>
<span class="slider" id="slider2"></span>
<span class="slider" id="slider3"></span>
<span class="slider" id="slider4"></span>
<span class="slider" id="slider5"></span>
<span class="slider" id="slider6"></span>
<span class="slider" id="slider7"></span>
<div class="imgContainer">
<div class="slide_div" id="slide_1">
<img src="https://images.unsplash.com/photo-1717766389119-ce5475e00d9c?crop=entropy&cs=srgb&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE3MjAxOTMzODR8&ixlib=rb-4.0.3&q=85" alt="Image 1" class="img" id="img1">
<a href="#slider1" class="button" id="button1"></a>
</div>
<div class="slide_div" id="slide_2">
<img src="https://images.unsplash.com/photo-1508186225823-0963cf9ab0de?crop=entropy&cs=srgb&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE3MjAxOTM0MDd8&ixlib=rb-4.0.3&q=85" alt="Image 2" class="img" id="img2">
<a href="#slider2" class="button" id="button2"></a>
</div>
<div class="slide_div" id="slide_3">
<img src="https://images.unsplash.com/photo-1542327897-d73f4005b533?crop=entropy&cs=srgb&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE3MjAxOTM0NDB8&ixlib=rb-4.0.3&q=85" alt="Image 3" class="img" id="img3">
<a href="#slider3" class="button" id="button3"></a>
</div>
<div class="slide_div" id="slide_4">
<img src="https://images.unsplash.com/photo-1531123897727-8f129e1688ce?q=80&w=3774&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Image 4" class="img" id="img4">
<a href="#slider4" class="button" id="button4"></a>
</div>
<div class="slide_div" id="slide_5">
<img src="https://images.unsplash.com/photo-1529626455594-4ff0802cfb7e?q=80&w=3000&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Image 5" class="img" id="img5">
<a href="#slider5" class="button" id="button5"></a>
</div>
<div class="slide_div" id="slide_6">
<img src="https://images.unsplash.com/photo-1514626585111-9aa86183ac98?q=80&w=3774&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Image 6" class="img" id="img6">
<a href="#slider6" class="button" id="button6"></a>
</div>
<div class="slide_div" id="slide_7">
<img src="https://images.unsplash.com/photo-1502823403499-6ccfcf4fb453?q=80&w=2000&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Image 7" class="img" id="img7">
<a href="#slider7" class="button" id="button7"></a>
</div>
</div>
</div>
body {
width: 100%;
height: 100vh;
display: flex;
align-items: center;
overflow: hidden;
background: linear-gradient(30deg, rgb(100, 241, 84), rgb(92, 92, 228), rgb(111, 30, 30));
}
.container {
width: 100%;
height: 90vh;
display: flex;
flex-direction: row;
align-items: center;
overflow: hidden;
}
.imgContainer {
width: 100%;
height: 600px;
position: absolute;
left: 0;
display: flex;
justify-content: center;
align-items: center;
transition: 1s;
}
.slide_div {
display: flex;
align-ittems: center;
justify-content: center;
margin: 0 30px 0 30px;
}
img {
position: relative;
height: 370px;
width: 240px;
filter: saturate(10%);
transition: 0.7s;
background-color: rgba(0, 0, 0, 0.4);
border-radius: 20px;
}
.button {
position: absolute;
width: 240px;
height: 370px;
transition: 0.7s;
background-color: rgba(0, 0, 0, 0.4);
border-radius: 20px;
}
.button:hover {
background-color: rgba(0, 0, 0, 0.2);
}
#slider1:target ~ .imgContainer #img1,
#slider1:target ~ .imgContainer #button1 {
width: 390px;
height: 600px;
background-color: transparent;
filter: saturate(100%);
}
#slider2:target ~ .imgContainer #img2,
#slider2:target ~ .imgContainer #button2 {
width: 390px;
height: 600px;
background-color: transparent;
filter: saturate(100%);
}
#slider3:target ~ .imgContainer #img3,
#slider3:target ~ .imgContainer #button3 {
width: 390px;
height: 600px;
background-color: transparent;
filter: saturate(100%);
}
#slider4:target ~ .imgContainer #img4,
#slider4:target ~ .imgContainer #button4 {
width: 390px;
height: 600px;
background-color: transparent;
filter: saturate(100%);
}
#slider5:target ~ .imgContainer #img5,
#slider5:target ~ .imgContainer #button5 {
width: 390px;
height: 600px;
background-color: transparent;
filter: saturate(100%);
}
#slider6:target ~ .imgContainer #img6,
#slider6:target ~ .imgContainer #button6 {
width: 390px;
height: 600px;
background-color: transparent;
filter: saturate(100%);
}
#slider7:target ~ .imgContainer #img7,
#slider7:target ~ .imgContainer #button7 {
width: 390px;
height: 600px;
background-color: transparent;
filter: saturate(100%);
}
#slider1:target ~ .imgContainer {
left: 60%;
}
#slider2:target ~ .imgContainer {
left: 40%;
}
#slider3:target ~ .imgContainer {
left: 20%;
}
#slider4:target ~ .imgContainer {
left: 0%;
}
#slider5:target ~ .imgContainer {
left: -20%;
}
#slider6:target ~ .imgContainer {
left: -40%;
}
#slider7:target ~ .imgContainer {
left: -60%;
}
