1. Slidein Gallery [abbreviated SG] works in all major browsers: Chrome, Firefox, Opera, Safari, and IE 11/10/9/8/7/6. [Animations and transitions work only partially in IE 9/8/7/6.]
2. SG is one compact stylish and professional component, and it can be integrated in any site, inside a <TD> element (or inside a <DIV> element).
3. Your site may be coded in HTML 2/3/4/5.
4. SG works very well for large pictures of high resolution, and for small one as well, though the pictures need to be all of the same size.  If you want to use 2/3 sizes of pictures, you can use 2/3 different Slidein Galleries using the ID selectors [as it is presented in our Tutorial Kit].
5. SG CSS code is very simple, therefore it is easy to implement in your site. In maximum 1 hour you have a working Slidein Gallery in your site, and in one day of fine tuning you can push it to the professional level!

Sorry, this item is currently not available!


This Tutorial Kit contains the following:
   B1: three HTML files, each implementing a different version of the Slidein Gallery.
   B2: one detailed PDF Tutorial file of 16 pages.
   B3: two stylesheet *.css files.
   B4: thirty pictures of 3 different sizes;
   B5: two blank pictures;
   B6: two page banner pictures of 992x210px each.


Slidein Gallery app. comes in three versions, and each one is explained line by line, functionally, as comments embedded into the CSS code, plus in ample details in a PDF tutorial file.

Slidein Gallery - CSS code explained

Slidein Gallery version 1

Version one of SG (file S_Gallery1.html) implements a "standard" Slidein Gallery, as it can be seen in the picture on right (the picture presents file S_Gallery1.html running).

Particular to this version of SG is the fact that it is designed to handle pictures that have the width larger or equal to the height. The large picture is sliding in from the right side.

This is a compact component easy to integrate in any site. For small pictures, SG can be nicely positioned in one corner of your site. For large pictures, the basic SG mechanism we present can be easily tailored to the professional level (as it is suggested in our tutorial kit).
Slidein Gallery version 2

Version two of Slidein Gallery (file S_Gallery2.htm) is designed to handle pictures that have the height greater or equal to the width.

The "slidein" animation mechanism is triggered by a transition, and is working only within that transition. This is an extraordinary instrument that opens incredible possibilities in CSS and HTML programming! The large picture slides in from the bottom.

This version uses ID selectors, therefore it can be used a single time in one HTML page. However, you can use multiple SG coded (a bit) differently.
Slidein Gallery version 3

Version 3 (file S_Gallery3.html) doesn't use a stylesheet anymore: the CSS code is embedded in the HTML page itself (again, using ID selectors).

This time we gave up on using animations; we use only transitions. Accordingly, in the first (double) transition the large picture slides in/out from/to the top-left corner of the SG component, while enlarging from 0 (or shrinking back to 0).

The second transition works on the thumb image: we change the color, the shape, and the shade of the thumb image. This version is an excellent lesson on working successfully (better than using animation) with multiple transitions.
Send your comments regarding this page using,, or
Page last updated on: July 05, 2018
© SC Complement Control SRL. All rights reserved.



Valid HTML 4.01!

Site page valid according to W3C

Valid CSS!

Stylesheets pages valid according to W3C