Cross Browser Compatible Pure CSS 2 Image Gallery

In the field of Web design, Image Gallery is very important factor. Because, by Image Gallery we can present any sample or information easily to the client. But problem is here that, it will not suitable if it is ‘table based layout’. Because ‘table based layout’ is not SEO friendly.
In this article, I will use pure CSS Level-2 to make image gallery which is cross browser compatible (including IE6) and without table based.
The code of first image gallery is given bellow.


DEMO


Description:

If we put Image, inside div according row and column and rotate 45 degree, then next image will be overlap on previous image. But it will not occur at Internet Explorer. Whereas the image is situated in ‘a' tag, so, if we set style property *margin-left:-33px; and *margin-top:-33px; of ‘a' tag then there is no malfunctioning at IE. (Here we use the symbol “*” to this property can not read other browser except IE. This is not valid for W3C. For the validation of W3C, we should use conditional comment or attached the CSS code in head section).
Here is a question – Why we use ‘33px’?
Answer – Here we edit the Thumbnail Image’s height and width in 75px, and if we rotate in 45 degree then the diagonal length will 75/sin(45) = 106px.
Now if we minus the Thumbnail image width from diagonal length, then we will get 31px (Here we take 2 pixels more).


HTML and CSS code:



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="X-UA-Compatible" content="IE=7" /> <!-- This is for IE9 -->
<title>CSS thumb1nail PopUp Test</title>
<style type="text/css">

div#cont {
position:relative;
margin:0px;
padding:10px;
*padding:40px; /* For IE */
border:0px solid blue;
width:365px;
height:450px;
}

.pop1 {
float: left;
margin:0px;
padding: 5px;
border:0px;
*margin-left:-33px; /* For IE */
*margin-top:-33px; /* For IE */
}

.pop1:hover {  
background: url("tr.gif");
}

.pop1 span { 
position: absolute;
margin:0px;
padding:0px;
border:0px solid red;
margin-left:-9999px;
margin-top:-9999px;
}

a.pop1:hover span { 
margin:0px;
padding: 0px;
border: 5px solid blue;
top:320px;
left:100px;
}

img.thumb1 {
margin:0px;
padding:0px;
border:2px solid blue;
-moz-transform:rotate(45deg);
-webkit-transform:rotate(45deg);
-o-transform:rotate(45deg);
-ms-transform:rotate(45deg);
filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476); /* IE6,IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(SizingMethod='auto expand', M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476)"; /* IE8 */
}

</style>
</head>
<body>
<div id="cont">
<a class="pop1" href="#" title="sample"><img class="thumb1" src="img/img1.jpg" width="75" height="75" alt="sample" border="0" />
 <span>
  <img src="img/img1.jpg" width="150" height="150" alt="sample" border="0" />
 </span></a>
<a class="pop1" href="#" title="sample">
 <img class="thumb1" src="img/img2.jpg" width="75" height="75" alt="sample" border="0" />
 <span>
  <img src="img/img2.jpg" width="150" height="150" alt="sample" border="0" />
 </span></a>
<a class="pop1" href="#" title="sample"><img class="thumb1" src="img/img3.jpg" width="75" height="75" alt="sample" border="0" />
 <span>
  <img src="img/img3.jpg" width="150" height="150" alt="sample" border="0" />
 </span></a>
<a class="pop1" href="#" title="sample">
 <img class="thumb1" src="img/img4.jpg" width="75" height="75" alt="sample" border="0" />
 <span>
  <img src="img/img4.jpg" width="150" height="150" alt="sample" border="0" />
 </span></a>
<a class="pop1" href="#" title="sample"><img class="thumb1" src="img/img5.jpg" width="75" height="75" alt="sample" border="0" />
 <span>
  <img src="img/img5.jpg" width="150" height="150" alt="sample" border="0" />
 </span></a>
<a class="pop1" href="#" title="sample">
 <img class="thumb1" src="img/img6.jpg" width="75" height="75" alt="sample" border="0" />
 <span>
  <img src="img/img6.jpg" width="150" height="150" alt="sample" border="0" />
 </span></a>
<a class="pop1" href="#" title="sample"><img class="thumb1" src="img/img7.jpg" width="75" height="75" alt="sample" border="0" />
 <span>
  <img src="img/img7.jpg" width="150" height="150" alt="sample" border="0" />
 </span></a>
<a class="pop1" href="#" title="sample">
 <img class="thumb1" src="img/img8.jpg" width="75" height="75" alt="sample" border="0" />
 <span>
  <img src="img/img8.jpg" width="150" height="150" alt="sample" border="0" />
 </span></a>
<a class="pop1" href="#" title="sample"><img class="thumb1" src="img/img9.jpg" width="75" height="75" alt="sample" border="0" />
 <span>
  <img src="img/img9.jpg" width="150" height="150" alt="sample" border="0" />
 </span></a>
<a class="pop1" href="#" title="sample">
 <img class="thumb1" src="img/img10.jpg" width="75" height="75" alt="sample" border="0" />
 <span>
  <img src="img/img10.jpg" width="150" height="150" alt="sample" border="0" />
 </span></a>
<a class="pop1" href="#" title="sample"><img class="thumb1" src="img/img11.jpg" width="75" height="75" alt="sample" border="0" />
 <span>
  <img src="img/img11.jpg" width="150" height="150" alt="sample" border="0" />
 </span></a>
<a class="pop1" href="#" title="sample">
 <img class="thumb1" src="img/img12.jpg" width="75" height="75" alt="sample" border="0" />
 <span>
  <img src="img/img12.jpg" width="150" height="150" alt="sample" border="0" />
 </span></a>
</div>
</body>
</html>

Please Comment it and Share it


No comments:

Post a Comment