Home » Tutorials

Cool Background Image Sliding effect with jQuery

Image Tutorials
Author Reading 15 min Views 650 Published by Modified by

Cool Background Image Sliding effect with jQuery. Today I am going to show you how to create sliding image cell effect. This is will something like small photo gallery. I prepared 3 demos for you with different effects. Please pay attention that our demo will work in browsers that support used CSS3 properties.

Contents
  1. Step 1. HTML
  2. index.html
  3. Step 2. CSS
  4. css/main.css
  5. Step 3. jQuery
  6. js/main.js
  7. Conclusion
Live Demo

[sociallocker]

download result

[/sociallocker]

Ok, download the example files and lets start coding !

Step 1. HTML

Here are full html code of our result. For our demonstration I use 5 photos – same amount of ‘navigation’ elements you can see here too.

index.html

01 <!DOCTYPE html>
02 <html lang="en" >
03     <head>
04         <meta charset="utf-8" />
05         <title>Cool Background Image Sliding effect with jQuery | Script Tutorials</title>
06         <link href="css/main.css" rel="stylesheet" type="text/css" />
07         <!--[if lt IE 9]>
08           <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
09         <![endif]-->
10         <script src="http://code.jquery.com/jquery-latest.min.js"></script>
11         <script src="js/main.js"></script>
12     </head>
13     <body>
14         <div class="container" id="container">
15             <ul class="nav">
16                 <li id="m1">Pic 1</li>
17                 <li id="m2">Pic 2</li>
18                 <li id="m3">Pic 3</li>
19                 <li id="m4">Pic 4</li>
20                 <li id="m5">Pic 5</li>
21             </ul>
22             <ul class="grid">
23                 <li id="g1">
24                     <div class="d1"></div>
25                     <div class="d2"></div>
26                     <div class="d3"></div>
27                     <div class="d4"></div>
28                     <div class="d5"></div>
29                 </li>
30                 <li id="g2">
31                     <div class="d1"></div>
32                     <div class="d2"></div>
33                     <div class="d3"></div>
34                     <div class="d4"></div>
35                     <div class="d5"></div>
36                 </li>
37                 <li id="g3">
38                     <div class="d1"></div>
39                     <div class="d2"></div>
40                     <div class="d3"></div>
41                     <div class="d4"></div>
42                     <div class="d5"></div>
43                 </li>
44                 <li id="g4">
45                     <div class="d1"></div>
46                     <div class="d2"></div>
47                     <div class="d3"></div>
48                     <div class="d4"></div>
49                     <div class="d5"></div>
50                 </li>
51                 <li id="g5">
52                     <div class="d1"></div>
53                     <div class="d2"></div>
54                     <div class="d3"></div>
55                     <div class="d4"></div>
56                     <div class="d5"></div>
57                 </li>
58                 <li id="g6">
59                     <div class="d1"></div>
60                     <div class="d2"></div>
61                     <div class="d3"></div>
62                     <div class="d4"></div>
63                     <div class="d5"></div>
64                 </li>
65             </ul>
66             <ul class="demos">
67                 <li><a href="index.html">Demo 1</a></li>
68                 <li><a href="index2.html">Demo 2</a></li>
69                 <li><a href="index3.html">Demo 3</a></li>
70             </ul>
71         </div>
72         <footer>
73             <h2>Cool Background Image Sliding effect with jQuery</h2>
74             <a href="https://www.script-tutorials.com/cool-background-image-sliding-effect-with-jquery/" class="stuts">Back to original tutorial on <span>Script Tutorials</span></a>
75         </footer>
76     </body>
77 </html>

Step 2. CSS

Now – our CSS styles. I will omit unnecessary styles of page layout, but will show you most important

css/main.css

001 .nav {
002     background-color:#DDD;
003     list-style:none outside none;
004     overflow:hidden;
005     padding:5px 140px;
006 }
007 .nav li {
008     border-radius:10px;
009     -moz-border-radius:10px;
010     -webkit-border-radius:10px;
011     border:2px outset #000000;
012     color:#000;
013     cursor:pointer;
014     float:left;
015     font-size:18px;
016     font-weight:bold;
017     margin-right:5px;
018     padding:10px;
019 }
020 .demos {
021     background-color:#DDD;
022     list-style:none outside none;
023     overflow:hidden;
024     padding:5px 165px;
025 }
026 .demos li {
027     border-radius:10px;
028     -moz-border-radius:10px;
029     -webkit-border-radius:10px;
030     border:2px outset #000000;
031     color:#000;
032     float:left;
033     font-size:18px;
034     font-weight:bold;
035     margin-right:5px;
036     padding:10px;
037 }
038 .demos li a {
039     color:#000;
040     cursor:pointer;
041     display:block;
042     font-size:20px;
043     font-weight:bold;
044     height:30px;
045     line-height:30px;
046     text-decoration:none;
047 }
048 .grid {
049     background-color:#DDD;
050     list-style:none outside none;
051     width:100%;
052 }
053 .grid li {
054     border:1px solid #777777;
055     float:left;
056     height:240px;
057     width:211px;
058     transition:all 0.5s linear;
059     -moz-transition:all 0.5s linear;
060     -o-transition:all 0.5s linear;
061     -webkit-transition:all 0.5s linear;
062 }
063 .grid li div {
064     transition:all 0.5s ease-in-out;
065     -moz-transition:all 0.5s ease-in-out;
066     -o-transition:all 0.5s ease-in-out;
067     -webkit-transition:all 0.5s ease-in-out;
068     float:left;
069 }
070 .grid li .d1 {
071     background:transparent url(../images/grid1.jpg) no-repeat top left;
072     height:100%;
073     width:211px;
074 }
075 .grid li .d2 {
076     background:transparent url(../images/grid2.jpg) no-repeat top left;
077     height:100%;
078     width:0;
079 }
080 .grid li .d3 {
081     background:transparent url(../images/grid3.jpg) no-repeat top left;
082     height:100%;
083     width:0;
084 }
085 .grid li .d4 {
086     background:transparent url(../images/grid4.jpg) no-repeat top left;
087     height:100%;
088     width:0;
089 }
090 .grid li .d5 {
091     background:transparent url(../images/grid5.jpg) no-repeat top left;
092     height:100%;
093     width:0;
094 }
095 .grid li#g2 div {
096     background-position:-211px 0;
097 }
098 .grid li#g3 div {
099     background-position:-422px 0;
100 }
101 .grid li#g4 div {
102     background-position:0 -240px;
103 }
104 .grid li#g5 div {
105     background-position:-211px -240px;
106 }
107 .grid li#g6 div {
108     background-position:-422px -240px;
109 }

As you can see – each grid cell element (LI) have some defined background, but with own background positions. And, I will use jQuery ‘animate’ to shift these positions when we will switch our images (through navigation)

Step 3. jQuery

js/main.js

01 $(function(){
02     $(".nav li").hover(
03       function () {
04         $('.grid li div').stop().animate({width:"0"},0);
05         var ind = $(".nav li").index(this);
06         $($('.grid li#g1 div')[ind]).stop().animate({width:"211px"},0);
07         $($('.grid li#g2 div')[ind]).stop().animate({width:"211px"},50);
08         $($('.grid li#g3 div')[ind]).stop().animate({width:"211px"},100);
09         $($('.grid li#g4 div')[ind]).stop().animate({width:"211px"},150);
10         $($('.grid li#g5 div')[ind]).stop().animate({width:"211px"},200);
11         $($('.grid li#g6 div')[ind]).stop().animate({width:"211px"},250);
12       }
13     );
14 });

As you can see – all very easy.

Live Demo

Conclusion

All another demos very similar, only few changes in styles and javascript code. You are welcome to play with our demos. Good luck!

Rate article
© 2025 Script Tutorials