معمولا در لیست تصاویر موجود در سایتها ، برای نمایش تصاویر از برخی افکت ها استفاده می کنیم .این افکت ها را میتوانیم با بکارگیری HTML و CSS در برنامه ایجاد کنیم .در این مقاله با ذکر یک مثال به برخی از این افکتها اشاره کرده ایم .

مرحله اول :

نرم افزار ویژوال استودیو را اجرا میکنیم .سپس یک Empty Website ایجاد میکنیم .

مرحله دوم :

در قسمت Solution Explorer یک  webform  با نام (Default.aspx)به پروژه اضافه میکنیم .

در قسمت Solution Explorer  یک پوشه با نام images ایجاد میکنیم .سپس تعدادی تصویر دلخواه در آن قرار میدهیم .

مرحله سوم :

حالا میخواهیم در صفحه تعدادی تصویر را به صورت گالری نمایش دهیم .برای این کار میتوانیم تگ ها و css مربوط به آنها را در صفحه اصلی قرار دهیم .

 <div class="main">  
                <div class="groweffect image">  
                    <img src="images/1.jpg"alt="portrait"/>  
                </div>  
                <div class="shrinkeffect image">  
                    <img src="images/2.jpg" alt="city"/>  
                </div>  
                <div class="sidepaneffect image">  
                    <img src="images/9.jpg" alt="city"/>  
                </div>  
                <div class="tilteffect  image">  
                    <img src="images/4.jpg"  alt="city"/>  
                </div>  
                <div class="morpheffect image">  
                    <img src="images/7.jpg" alt="city" />  
                </div>  
                <div class="bnweffect image">  
                    <img src="images/10.jpg" alt="city" />  
                </div>  
            </div>   

سپس افکت لازم برای تگ های موجود را ، توسط Css فراخوانی می کنیم .

   <style type="text/css">  
        
    {  
  -webkit-box-sizing: border-box;  
     -moz-box-sizing: border-box;  
      -ms-box-sizing: border-box;  
          box-sizing: border-box;  
}  
    
   
body {  
  background: #FAFAD2;  
    
}  
   
   
.image {  
  border: 10px dashed #fff;   
  float: left;  
  height: 300px;  
  width: 300px;  
  margin: 10px;  
  overflow: hidden;  
    
     
  -webkit-box-shadow: 5px 5px 5px #111;  
          box-shadow: 4px 4px 4px #111;   
}  
  
  
.groweffect img {  
  height: 300px;  
  width: 300px;  
   
  -webkit-transition: all 1s ease;  
     -moz-transition: all 1s ease;  
       -o-transition: all 1s ease;  
      -ms-transition: all 1s ease;  
          transition: all 1s ease;  
}  
    
   
.groweffect img:hover {  
  width: 400px;  
  height: 400px;  
}  
   
  
.shrinkeffect img {  
  height: 400px;  
  width: 400px;  
   
  -webkit-transition: all 1s ease;  
     -moz-transition: all 1s ease;  
       -o-transition: all 1s ease;  
      -ms-transition: all 1s ease;  
          transition: all 1s ease;  
}  
     
   
.shrinkeffect img:hover {  
  width: 300px;  
  height: 300px;  
}  
  
  
.sidepaneffect img {  
  margin-left: 0px;  
  -webkit-transition: margin 1s ease;  
     -moz-transition: margin 1s ease;  
       -o-transition: margin 1s ease;  
      -ms-transition: margin 1s ease;  
          transition: margin 1s ease;  
}  
     
   
.sidepaneffect img:hover {  
  margin-left: -200px;  
}  
     
  
.tilteffect {  
  -webkit-transition: all 0.5s ease;  
     -moz-transition: all 0.5s ease;  
       -o-transition: all 0.5s ease;  
      -ms-transition: all 0.5s ease;  
          transition: all 0.5s ease;  
}  
   
   
    
.tilteffect:hover {  
  -webkit-transform: rotate(-10deg);  
     -moz-transform: rotate(-10deg);  
       -o-transform: rotate(-10deg);  
      -ms-transform: rotate(-10deg);  
          transform: rotate(-10deg);  
}  
  
    
  
.morpheffect {  
  -webkit-transition: all 0.5s ease;  
     -moz-transition: all 0.5s ease;  
       -o-transition: all 0.5s ease;  
      -ms-transition: all 0.5s ease;  
          transition: all 0.5s ease;  
}  
    
    
.morpheffect:hover {  
  border-radius: 50%;  
  -webkit-transform: rotate(360deg);  
     -moz-transform: rotate(360deg);  
       -o-transform: rotate(360deg);  
      -ms-transform: rotate(360deg);  
          transform: rotate(360deg);  
}  
  
  
  
.bnweffect {  
  -webkit-transition: all 1s ease;  
     -moz-transition: all 1s ease;  
       -o-transition: all 1s ease;  
      -ms-transition: all 1s ease;  
          transition: all 1s ease;  
}  
   
    
.bnweffect:hover   
{  
  -webkit-filter: grayscale(100%);  
}  
      .style1  
      {  
          text-decoration: underline;  
      }  
        
      .main  
      {  
          margin:0px 0px 0px 150px;  
            
            
        }  
               
  </style>   

سپس برنامه را اجرا میکنیم ، مشاهده میکنید که با قرار دادن نمایشگر بر روی هر تصویر یک افکتی خاص بر روی آن تصویر اجرا میشود .