How to make a Swing Box for your Website Photo Gallery

I recently had a web page to make which had to simple. Just some square images, floating on the page. Each image depicted a section of the website. However, as there was no text written on or under these images, to describe exactly what they stood for, I had to work out a way to have that description there for the reading, without disturbing the design.

Then I remember Google Plus. They have these boxes which flip. So, I decided to make something similar. This is basically what i was aiming for.

This is what is inside the box. This is the text that is to be shown when the box is turned around.
Basically, this can used in a gallery, or to make a menu with images and description hidden behind them, etc.

So, in words, this is what I need to have:

1. An image which is shown initially
2. A method to make that image flip and in process, change to a blank background
3. A content that should appear inside the box when it is flipped.

Here is how it was achieved. First comes the CSS. 

1. <style>
2. #shekhoo-main-wrapper
3. {
4. width:100%;
5. height:100%;
6. display:inline-block;
7. }
8. .shekhoo-swing-container
9. {
10. width:300px;
11. height:300px;
12. margin:10px;
13. float:left;
14. }
15. .shekhoo-swing-box
16. {
17. width:300px;
18. height:300px;
19. background-image:url(image.jpg);
20. background-size:contain;
21. -webkit-transition:all 1000ms;   
22.     -moz-transition:all 1000ms;
23.     -o-transition:all 1000ms;
24.     transition:all 1000ms; 
25. }
26. .shekhoo-swing-container:hover .shekhoo-swing-box
27. {
28. cursor:pointer;
29. -webkit-transform:scaleX(-1);
30. -moz-transform:scaleX(-1);
31. -o-transform:scaleX(-1);
32. transform:scaleX(-1);
33. }
34. .shekhoo-swing-container:hover .swing-inner
35. {
36. opacity:1.0;
37. }
38. .swing-inner
39. {
40. text-align:left;
41. /*enable the text to be reverse-mirrored when the box flips */
42. -webkit-transform:scaleX(-1);
43. -moz-transform:scaleX(-1);
44. -o-transform:scaleX(-1);
45. transform:scaleX(-1);
46. width:100%;
47. height:100%;
48. background-color:#9FC;
49. opacity:0.0;
50. -webkit-transition:all 1000ms;   
51.     -moz-transition:all 1000ms;
52.     -o-transition:all 1000ms;
53.     transition:all 1000ms; 
55. }
56. </style>

In the above CSS, the main ingredient was the transform attribute and the transition attribute. Defining the value of transform using the scaleX function, basically gives the box a scale along the X axis. This scale can even go in negative, which is something that we have used here.

Also, the transition attribute gives the transformation, sometime to happen, making it slow and thus visible to the user.

Next comes the HTML part. This is basically, just the implementation of the elements that we needed and defined CSS for. No tricks here.

1. <div id="shekhoo-main-wrapper" align="center">
2. <div class="shekhoo-swing-container">
3.      <div class="shekhoo-swing-box" id="swingone" onmouseover="swingbox(this.id)" onmouseout="unswingbox(this.id)">
4.          <div class="swing-inner">
5.              <br />
6. This is what is inside the box. This is the text that is to be shown when the box is turned around.<br />
7.  Basically, this can used in a gallery, or to make a menu with images and description hidden behind them, etc.
8.             </div>
9.         </div>   
10.     </div>

As the swing container and its contents are defined as class. You can use this element repeatedly to make up a whole page of items with it. The only attribute that you have to change here is the id of the swing-box.