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:

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">
  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. }
  16. /* This is your Body CSS */
  18. body {
  19. background: #FAFAD2;
  21. }
  23. /* This is your Image CSS */
  25. .image {
  26. border: 10px dashed #fff;
  27. float: left;
  28. height: 300px;
  29. width: 300px;
  30. margin: 10px;
  31. overflow: hidden;
  34. -webkit-box-shadow: 5px 5px 5px #111;
  35. box-shadow: 4px 4px 4px #111;
  36. }
  39. /* This is your Grow Effect CSS */
  41. .groweffect img {
  42. height: 300px;
  43. width: 300px;
  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. }
  52. /* This is your Grow Image Effect CSS */
  54. .groweffect img:hover {
  55. width: 400px;
  56. height: 400px;
  57. }
  59. /* This is your Shrink Effect CSS */
  61. .shrinkeffect img {
  62. height: 400px;
  63. width: 400px;
  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. }
  72. /* This is your Shrink Image Effect CSS */
  74. .shrinkeffect img:hover {
  75. width: 300px;
  76. height: 300px;
  77. }
  80. /* This is your Sidepan Effect CSS */
  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. }
  91. /* This is your Sidepan Image Effect CSS */
  93. .sidepaneffect img:hover {
  94. margin-left: -200px;
  95. }
  99. /* This is your Tilt Effect CSS */
  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. }
  111. /* This is your Tilt Image Effect CSS */
  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. }
  122. /* This is your Morph Effect CSS */
  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. }
  132. /* This is your Morph Image Effect CSS */
  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. }
  145. /* This is your Black and white Effect CSS */
  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. }
  155. /* This is your Black and white Image Effect CSS */
  157. .bnweffect:hover
  158. {
  159. -webkit-filter: grayscale(100%);
  160. }
  161. .style1
  162. {
  163. text-decoration: underline;
  164. }
  166. .main
  167. {
  168. margin:0px 0px 0px 150px;
  171. }
  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.