Today we come with another tutorial called pure CSS3 responsive fullscreen image gallery. This gallery created using the latest CSS3 techniques without using JavaScript or jQuery but have all the features just like any JavaScript gallery.
It has awesome functions and features. This includes the autoplay, Play/Pause button and much more.
Furthermore, its fully responsive gallery and works on all kind of devices such as iPad, iPhone, and laptop. We included some great functionality in this gallery by using CSS3 animation.
The only issue with this gallery, It don’t support thumbnails but you can check out our next tutorial about creating a pure CSS image gallery with thumbnails which also build with CSS only.
The features included in this gallery are normally possible with jQuery but now you don’t need to implement jQuery or JavaScript code to get such kind of advanced functions.
Let me explain to you what functions are included in this gallery.
Few Features of CSS3 Responsive Fullscreen Image Gallery
- This fullscreen background gallery has to include left/right navigation arrow which allows moving to the next or previous slide.
- It also includes auto-play functions with, Play, Pause and stop button. When Play button clicks, the gallery automatically starts and move each slide after the specified time frame. You can stop it and can slide it manually by using the next/previous button.
- It moves the images just like an image slider so you can use it as a slider by customization in CSS code.
- It also includes the timer bar which starts when gallery on autoplay.
- We also added the bulletin point navigation which is click-able and changes the image when a user clicks on it.
The Markup for Gallery
To build this gallery, First of all, we will implement a navigation system by using the Input type radio buttons. The first block of buttons are used to select each slide and the other block of buttons handle the function of play, stop, and pause.
<!-- INPUT FOR BUTTON SELECT SLIDE -->
<input type="radio" name="next" id="slide1" checked>
<input type="radio" name="next" id="slide2">
<input type="radio" name="next" id="slide3">
<input type="radio" name="next" id="slide4">
<!-- INPUT FOR BUTTON STOP&PLAY -->
<input type="radio" name="sto" id="play">
<input type="radio" name="sto" id="stop" checked>
<input type="radio" name="sto" id="pause">
Next, we need to implement the left and right arrows functionality. Each slide requires two labels, one for left and another one for the right slide.
<label for="slide4" class="int manage_one left"></label>
<label for="slide2" class="int manage_one right"></label>
<label for="slide1" class="int manage_two left"></label>
<label for="slide3" class="int manage_two right"></label>
<label for="slide2" class="int manage_tre left"></label>
<label for="slide4" class="int manage_tre right"></label>
<label for="slide3" class="int manage_for left"></label>
<label for="slide1" class="int manage_for right"></label>
Now we need to add images. You need to define a DIV class name image. All of the images are defined instead that div. Have a look at the HTML code below:
<!-- IMAGE -->
<div class="image">
<img src="images/1.jpg" class="oneP" alt="Flash">
<img src="images/2.jpg" class="twoP" alt="Superman">
<img src="images/3.jpg" class="threeP" alt="Team">
<img src="images/1.jpg" class="fourP" alt="Joker">
</div>
In the end, we need to manage the timer bar and bottom bulletin points which can be done as follows.
<!-- ANIMATION LINE --> <div class="aline"> <div class="line"></div> <div class="bord"><span></span></div> <div class="bord"><span></span></div> <div class="bord"><span></span></div> <div class="bord"><span></span></div> </div> <!-- BOTTOM LINE --> <div class="but"> <label for="slide1" class="select_but select1" onclick=""> <div></div> </label> <label for="slide2" class="select_but select2" onclick=""> <div></div> </label> <label for="slide3" class="select_but select3" onclick=""> <div></div> </label> <label for="slide4" class="select_but select4" onclick=""> <div></div> </label> </div>
How to Style Gallery
First, we talk about the styling of an image. As we have four images in our gallery so we should need to divide the 4/100 = 25%
That means, we need to set each image width %25. As you can see in above HTML section we have included all the images in DIV which have a class name .image So here we also need to set a width to 400% for a DIV which class name is image
img{
width: 25%;
-webkit-background-size: contain;
-moz-background-size: contain;
background-size: contain;
display: inline-block;
float: left;
margin: 0;
padding: 0;
}
.image{
display: block;
width: 400%;
height: 100%;
position:fixed;
}
To handle the play and stop functionality, We need to add the following CSS.
/*BUTTON PLAY&STOP*/
.menu{
position: absolute;
width: 94px;
height: 30px;
margin: 20px 0px 0px 30px;
z-index: 1;
}
.tooltip{
width: 80px;
height: 40px;
margin-top: -34px;
margin-left: -94px;
display: inline-block;
float: left;
border-radius: 2px;
background: #fff;
z-index: -10;
opacity: .8;
-webkit-animation: tool ease-in 6s;
-webkit-animation-fill-mode: forwards;
animation: tool ease-in 6s;
animation-fill-mode: forwards;
}
That’s not quite enough to do and we still need to add a lot more CSS to handle the gallery functions and design. It’s not possible for me to explain each function here because some of are a bit complex.
But don’t you worry, You can find all the style in the demo and download file. You can download a file and make customization as you want.
If you have an issue, I am pretty much happy to assist you. You can leave a comment and let me know if you having an issue while implementation. Let me know what you think about it and how it makes your life easy.