Introduction :-
Hii Friends...
Today I explain how to make a image zoom-in and zoom-out with the help of Css. This Css works on mouse-over event. So now I explain this with step by step.
Step : 1 The Css goes here :->
Firstly we create a style-sheet and give it any name that you want only the extension give .css.
.opacity_img{
opacity: 1.0;
border-radius: 10px;
border: groove;
}
.opacity_img:hover{
cursor:pointer;
opacity: 0.85;
border-radius: 5px;
}
.zoom
{
opacity: 1.0;
border-radius: 10px;
border: groove;
}
.zoom:hover {
cursor:pointer;
opacity: 0.95;
border-radius: 5px;
transform:scale(1.05);
-webkit-transform:scale(1.05);
}
Step : 2 The Designing code goes here :->
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Asp.Net Modules</title>
<link href="css/StyleSheet.css" rel="stylesheet" type="text/css" />
</head>
<body>
<form id="form1" runat="server">
<asp:Image ID="Image1" runat="server" />
<div>
<asp:Image ID="Image3" runat="server"
ImageUrl="~/1175248_562016663864760_1003157513_n.jpg" Width="174px" class="zoom" />
<asp:Image ID="Image4" runat="server"
ImageUrl="~/546121_378895068891395_846850474_n.jpg" Width="174px" class="zoom" />
<asp:Image ID="Image5" runat="server"
ImageUrl="~/579525_573727176006124_448400181_n.jpg" Width="174px" class="zoom" />
<asp:Image ID="Image6" runat="server"
ImageUrl="~/1043870_698399306872243_1105324895_n.jpg" Width="174px" class="zoom" />
</div>
</form>
</body>
</html>
DEMO:-
Hii Friends...
Today I explain how to make a image zoom-in and zoom-out with the help of Css. This Css works on mouse-over event. So now I explain this with step by step.
Step : 1 The Css goes here :->
Firstly we create a style-sheet and give it any name that you want only the extension give .css.
.opacity_img{
opacity: 1.0;
border-radius: 10px;
border: groove;
}
.opacity_img:hover{
cursor:pointer;
opacity: 0.85;
border-radius: 5px;
}
.zoom
{
opacity: 1.0;
border-radius: 10px;
border: groove;
}
.zoom:hover {
cursor:pointer;
opacity: 0.95;
border-radius: 5px;
transform:scale(1.05);
-webkit-transform:scale(1.05);
}
Step : 2 The Designing code goes here :->
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Asp.Net Modules</title>
<link href="css/StyleSheet.css" rel="stylesheet" type="text/css" />
</head>
<body>
<form id="form1" runat="server">
<asp:Image ID="Image1" runat="server" />
<div>
<asp:Image ID="Image3" runat="server"
ImageUrl="~/1175248_562016663864760_1003157513_n.jpg" Width="174px" class="zoom" />
<asp:Image ID="Image4" runat="server"
ImageUrl="~/546121_378895068891395_846850474_n.jpg" Width="174px" class="zoom" />
<asp:Image ID="Image5" runat="server"
ImageUrl="~/579525_573727176006124_448400181_n.jpg" Width="174px" class="zoom" />
<asp:Image ID="Image6" runat="server"
ImageUrl="~/1043870_698399306872243_1105324895_n.jpg" Width="174px" class="zoom" />
</div>
</form>
</body>
</html>
DEMO:-
0 comments:
Post a Comment