Post
Ask Question

How to Make Image Effect Gallery in ASP.Net Using HTML and CSS

Initial Chamber

Step 1

Open Visual Studio 2010 and create an Empty Website. Name it imageeffect_demo.

Step 2

In Solution Explorer you will get your empty website, then add a Web Form to your website as in the following.

For Web Form:

    Go to your empty website imageeffect_demo, right-click and Add New Item as Web Form. Name it imageeffect_demo.aspx.

Create a new folder in Solution Explorer using right-click on the website, then clicking on Add New Folder. The following image will provide a better idea.


Add New Folder

Now just select the images from anywhere you want to add to your application and paste it into “New Folder” as in the following image.

New Folder

Design Chamber

Step 3
 
Now to build our application using HTML and CSS. Open your imageeffect_demo.aspx page and write the following code.

Imageffect_demo.aspx
  1. <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>  
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  3. <html  
  4.     xmlns="http://www.w3.org/1999/xhtml">  
  5.     <head runat="server">  
  6.         <title></title>  
  7.         <style type="text/css">  
  8.         
  9.     {  
  10.   -webkit-box-sizing: border-box;  
  11.      -moz-box-sizing: border-box;  
  12.       -ms-box-sizing: border-box;  
  13.           box-sizing: border-box;  
  14. }  
  15.    
  16. /* This is your Body CSS */  
  17.    
  18. body {  
  19.   background: #FAFAD2;  
  20.     
  21. }  
  22.    
  23.  /* This is your Image CSS */  
  24.    
  25. .image {  
  26.   border: 10px dashed #fff;   
  27.   float: left;  
  28.   height: 300px;  
  29.   width: 300px;  
  30.   margin: 10px;  
  31.   overflow: hidden;  
  32.     
  33.      
  34.   -webkit-box-shadow: 5px 5px 5px #111;  
  35.           box-shadow: 4px 4px 4px #111;   
  36. }  
  37.   
  38.   
  39. /* This is your Grow Effect CSS */  
  40.   
  41. .groweffect img {  
  42.   height: 300px;  
  43.   width: 300px;  
  44.    
  45.   -webkit-transition: all 1s ease;  
  46.      -moz-transition: all 1s ease;  
  47.        -o-transition: all 1s ease;  
  48.       -ms-transition: all 1s ease;  
  49.           transition: all 1s ease;  
  50. }  
  51.    
  52.  /* This is your Grow Image Effect  CSS */  
  53.    
  54. .groweffect img:hover {  
  55.   width: 400px;  
  56.   height: 400px;  
  57. }  
  58.   
  59. /* This is your Shrink Effect CSS */  
  60.   
  61. .shrinkeffect img {  
  62.   height: 400px;  
  63.   width: 400px;  
  64.    
  65.   -webkit-transition: all 1s ease;  
  66.      -moz-transition: all 1s ease;  
  67.        -o-transition: all 1s ease;  
  68.       -ms-transition: all 1s ease;  
  69.           transition: all 1s ease;  
  70. }  
  71.    
  72.   /* This is your Shrink Image Effect  CSS */  
  73.    
  74. .shrinkeffect img:hover {  
  75.   width: 300px;  
  76.   height: 300px;  
  77. }  
  78.   
  79.   
  80.  /* This is your Sidepan  Effect  CSS */  
  81.   
  82. .sidepaneffect img {  
  83.   margin-left: 0px;  
  84.   -webkit-transition: margin 1s ease;  
  85.      -moz-transition: margin 1s ease;  
  86.        -o-transition: margin 1s ease;  
  87.       -ms-transition: margin 1s ease;  
  88.           transition: margin 1s ease;  
  89. }  
  90.    
  91.   /* This is your Sidepan Image Effect  CSS */  
  92.    
  93. .sidepaneffect img:hover {  
  94.   margin-left: -200px;  
  95. }  
  96.   
  97.   
  98.   
  99.  /* This is your Tilt  Effect  CSS */  
  100.    
  101.   
  102. .tilteffect {  
  103.   -webkit-transition: all 0.5s ease;  
  104.      -moz-transition: all 0.5s ease;  
  105.        -o-transition: all 0.5s ease;  
  106.       -ms-transition: all 0.5s ease;  
  107.           transition: all 0.5s ease;  
  108. }  
  109.    
  110.    
  111.   /* This is your Tilt Image Effect  CSS */  
  112.     
  113. .tilteffect:hover {  
  114.   -webkit-transform: rotate(-10deg);  
  115.      -moz-transform: rotate(-10deg);  
  116.        -o-transform: rotate(-10deg);  
  117.       -ms-transform: rotate(-10deg);  
  118.           transform: rotate(-10deg);  
  119. }  
  120.   
  121.   
  122.  /* This is your Morph Effect  CSS */  
  123.   
  124. .morpheffect {  
  125.   -webkit-transition: all 0.5s ease;  
  126.      -moz-transition: all 0.5s ease;  
  127.        -o-transition: all 0.5s ease;  
  128.       -ms-transition: all 0.5s ease;  
  129.           transition: all 0.5s ease;  
  130. }  
  131.    
  132.   /* This is your Morph Image Effect  CSS */  
  133.     
  134. .morpheffect:hover {  
  135.   border-radius: 50%;  
  136.   -webkit-transform: rotate(360deg);  
  137.      -moz-transform: rotate(360deg);  
  138.        -o-transform: rotate(360deg);  
  139.       -ms-transform: rotate(360deg);  
  140.           transform: rotate(360deg);  
  141. }  
  142.   
  143.   
  144.   
  145.  /* This is your  Black and white Effect  CSS */  
  146.   
  147. .bnweffect {  
  148.   -webkit-transition: all 1s ease;  
  149.      -moz-transition: all 1s ease;  
  150.        -o-transition: all 1s ease;  
  151.       -ms-transition: all 1s ease;  
  152.           transition: all 1s ease;  
  153. }  
  154.    
  155.   /* This is your Black and  white Image Effect  CSS */  
  156.     
  157. .bnweffect:hover   
  158. {  
  159.   -webkit-filter: grayscale(100%);  
  160. }  
  161.       .style1  
  162.       {  
  163.           text-decoration: underline;  
  164.       }  
  165.         
  166.       .main  
  167.       {  
  168.           margin:0px 0px 0px 150px;  
  169.             
  170.             
  171.         }  
  172.         
  173.         
  174.         
  175.   </style>  
  176.     </head>  
  177.     <body>  
  178.         <h1 align="center" class="style1">Image Effect Gallery</h1>  
  179.         <form id="form1" runat="server">  
  180.             <div class="main">  
  181.                 <div class="groweffect image">  
  182.                     <img src="images/1.jpg"alt="portrait"/>  
  183.                 </div>  
  184.                 <div class="shrinkeffect image">  
  185.                     <img src="images/2.jpg" alt="city"/>  
  186.                 </div>  
  187.                 <div class="sidepaneffect image">  
  188.                     <img src="images/9.jpg" alt="city"/>  
  189.                 </div>  
  190.                 <div class="tilteffect  image">  
  191.                     <img src="images/4.jpg"  alt="city"/>  
  192.                 </div>  
  193.                 <div class="morpheffect image">  
  194.                     <img src="images/7.jpg" alt="city" />  
  195.                 </div>  
  196.                 <div class="bnweffect image">  
  197.                     <img src="images/10.jpg" alt="city" />  
  198.                 </div>  
  199.             </div>  
  200.         </form>  
  201.     </body>  
  202. </html>  
Output Chamber

image effect

Output

I hope you liked this. Here I have attached the source code for reference.

Thank you for reading. Have a nice day. 


Similar Articles