Post
Ask Question

How to Set Photo Effect Using CSS

How to set effects in photo
 
Html code
  1. <div class="focus pic">  
  2.     <img src="Images/3.jpg" height="300px" width="300px" alt="cricket" />  
  3. </div>  
  4. <div class="morph pic">  
  5.     <img src="Images/111.jpg" height="300px" width="300px" alt="beach" />  
  6. </div>  
  7. <div class="vertpan pic">  
  8.     <img src="Images/4.jpg" height="500px" width="300px" alt="climb" />  
  9. </div>  
  10. <br />  
  11. <div class="tilt pic">  
  12.     <img src="Images/2.jpg" height="300px" width="300px" alt="car" />  
  13. </div>  
  14. <div class="mani pic">  
  15.     <img src="Images/1.jpg" height="500px" width="500px" alt="climb" />  
  16. </div>  
  17. <div class="brighten pic">  
  18.     <img src="Images/3.jpg" height="500px" width="500px" alt="climb" />  
  19. </div>  
Css Code
  1. * {  
  2.   -webkit-box-sizing: border-box;  
  3.   -moz-box-sizing: border-box;  
  4.   -ms-box-sizing: border-box;  
  5.   box-sizing: border-box;  
  6. }  
  7.   
  8. body {  
  9.   background: #333;  
  10. }  
  11.   
  12. .pic {  
  13.   border: 10px solid #fff;  
  14.   float: left;  
  15.   height: 300px;  
  16.   width: 300px;  
  17.   margin: 50px;  
  18.   overflow: hidden;  
  19.   -webkit-box-shadow: 5px 5px 5px #111;  
  20.   box-shadow: 5px 5px 5px #111;  
  21. }  
  22.   
  23. /*FOCUS*/  
  24. .focus {  
  25.   -webkit-transition: all 1s ease;  
  26.   -moz-transition: all 1s ease;  
  27.   -o-transition: all 1s ease;  
  28.   -ms-transition: all 1s ease;  
  29.   transition: all 1s ease;  
  30. }  
  31.   
  32. .focus:hover {  
  33.   border: 30px solid #000;  
  34.   border-radius: 50%;  
  35. }  
  36. /*MORPH*/  
  37. .morph {  
  38.   -webkit-transition: all 1s ease;  
  39.   -moz-transition: all 1s ease;  
  40.   -o-transition: all 1s ease;  
  41.   -ms-transition: all 1s ease;  
  42.   transition: all 1s ease;  
  43. }  
  44.   
  45. .morph:hover {  
  46.   border-radius: 50%;  
  47.   -webkit-transform: rotate(360deg);  
  48.   -moz-transform: rotate(360deg);  
  49.   -o-transform: rotate(360deg);  
  50.   -ms-transform: rotate(360deg);  
  51.   transform: rotate(360deg);  
  52. }  
  53. /*VERTPAN*/  
  54. .vertpan img {  
  55.   margin-top: 0px;  
  56.   -webkit-transition: margin 1s ease;  
  57.   -moz-transition: margin 1s ease;  
  58.   -o-transition: margin 1s ease;  
  59.   -ms-transition: margin 1s ease;  
  60.   transition: margin 1s ease;  
  61. }  
  62.   
  63. .vertpan img:hover {  
  64.   margin-top: -200px;  
  65. }  
  66. /*TILT*/  
  67. .tilt {  
  68.   -webkit-transition: all 1s ease;  
  69.   -moz-transition: all 1s ease;  
  70.   -o-transition: all 1s ease;  
  71.   -ms-transition: all 1s ease;  
  72.   transition: all 1s ease;  
  73. }  
  74.   
  75. .tilt:hover {  
  76.   -webkit-transform: rotate(-10deg);  
  77.   -moz-transform: rotate(-10deg);  
  78.   -o-transform: rotate(-10deg);  
  79.   -ms-transform: rotate(-10deg);  
  80.   transform: rotate(-10deg);  
  81. }  
  82. /*B&W*/  
  83. .mani img {  
  84.   margin-top: 0px;  
  85.   -webkit-transition: margin 2s ease;  
  86.   -moz-transition: margin 2s ease;  
  87.   -o-transition: margin 2s ease;  
  88.   -ms-transition: margin 2s ease;  
  89.   transition: margin 2s ease;  
  90.   -webkit-transition: all 0.5s ease;  
  91.   -moz-transition: all 2s ease;  
  92.   -o-transition: all 2s ease;  
  93.   -ms-transition: all 2s ease;  
  94.   transition: all 2s ease;  
  95. }  
  96.   
  97. .mani img:hover {  
  98.   margin-top: -200px;  
  99.   border-radius: 50%;  
  100.   -webkit-transform: rotate(360deg);  
  101.   -moz-transform: rotate(360deg);  
  102.   -o-transform: rotate(360deg);  
  103.   -ms-transform: rotate(360deg);  
  104.   transform: rotate(360deg);  
  105. }  
Try it and see your photo effect
 
Thank U