Code
<!DOCTYPE html>
<html>
<head>
<Title>DKB Photo Gallary</Title>
<style type="text/css">
body{background-image:url(Images\bg.png);}
img
{
width:150px;
height:120px;
box-shadow:10px 10px 105px limegreen;
border-radius:5px 5px 5px 5px;
opacity:0.5;
float:left;
position:relative;
padding:5px 5px 5px 5px;
background:lightgreen;
border:3px solid green;
}
.pic1
{
z-index:1;
-webkit-transform:translate(50px,50px) rotate(-30deg);
-ms-transform:translate(50px,50px) rotate(-30deg);
-moz-transform:translate(50px,50px) rotate(-30deg);
}
.pic2
{
z-index:1;
-webkit-transform:translate(50px,50px) rotate(-3deg);
-ms-transform:translate(50px,50px) rotate(-3deg);
-moz-transform:translate(50px,50px) rotate(-3deg);
}
.pic3
{
z-index:1;
-webkit-transform:translate(50px,50px) rotate(15deg);
-ms-transform:translate(50px,50px) rotate(15deg);
-moz-transform:translate(50px,50px) rotate(15deg);
}
.pic4
{
z-index:1;
-webkit-transform:translate(50px,50px) rotate(-20deg);
-ms-transform:translate(50px,50px) rotate(-20deg);
-moz-transform:translate(50px,50px) rotate(-20deg);
}
img:hover
{
width:400px;
height:500px;
box-shadow:10px 10px 105px pink;
border-radius:5px 5px 5px 5px;
opacity:0.5;
float:left;
position:relative;
padding:10px 10px 10px 10px;
background:yellow;
border:3px solid orange;
}
</style>
</head>
<body>
<p>
<img class="pic1" src="Images\chloe_moretz.jpg">
<img class="pic2" src="Images\cosmos-wide.jpg">
<img class="pic3" src="Images\horses-wide.jpg">
<img class="pic4" src="Images\olivia_wilde.jpg"><br>
</p>
</body>
</html>
<html>
<head>
<Title>DKB Photo Gallary</Title>
<style type="text/css">
body{background-image:url(Images\bg.png);}
img
{
width:150px;
height:120px;
box-shadow:10px 10px 105px limegreen;
border-radius:5px 5px 5px 5px;
opacity:0.5;
float:left;
position:relative;
padding:5px 5px 5px 5px;
background:lightgreen;
border:3px solid green;
}
.pic1
{
z-index:1;
-webkit-transform:translate(50px,50px) rotate(-30deg);
-ms-transform:translate(50px,50px) rotate(-30deg);
-moz-transform:translate(50px,50px) rotate(-30deg);
}
.pic2
{
z-index:1;
-webkit-transform:translate(50px,50px) rotate(-3deg);
-ms-transform:translate(50px,50px) rotate(-3deg);
-moz-transform:translate(50px,50px) rotate(-3deg);
}
.pic3
{
z-index:1;
-webkit-transform:translate(50px,50px) rotate(15deg);
-ms-transform:translate(50px,50px) rotate(15deg);
-moz-transform:translate(50px,50px) rotate(15deg);
}
.pic4
{
z-index:1;
-webkit-transform:translate(50px,50px) rotate(-20deg);
-ms-transform:translate(50px,50px) rotate(-20deg);
-moz-transform:translate(50px,50px) rotate(-20deg);
}
img:hover
{
width:400px;
height:500px;
box-shadow:10px 10px 105px pink;
border-radius:5px 5px 5px 5px;
opacity:0.5;
float:left;
position:relative;
padding:10px 10px 10px 10px;
background:yellow;
border:3px solid orange;
}
</style>
</head>
<body>
<p>
<img class="pic1" src="Images\chloe_moretz.jpg">
<img class="pic2" src="Images\cosmos-wide.jpg">
<img class="pic3" src="Images\horses-wide.jpg">
<img class="pic4" src="Images\olivia_wilde.jpg"><br>
</p>
</body>
</html>
By Dharmendra Bakrecha
http://dkbakrecha.webs.com/dkbstuff.htm
mail : dkbakrecha@gmail.com
No comments:
Post a Comment