Monday, October 19, 2015

How to make Zoom-in and Zoom-out image with Css

                No comments   

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:-

0 comments:

Post a Comment

Popular Posts