How we can Make a Effective Photo Frame and Its Effects

This Code For Design HTML

  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>
Code For background and Image Border
  1. * {  
  2.     -webkit - box - sizing: border - box; - moz - box - sizing: border - box; - ms - box - sizing: border - box;  
  3.     box - sizing: border - box;  
  4. }  
  5. body {  
  6.     background: #333;  
  7. }  
  8. .pic {  
  9. border: 10px solid # fff;  
  10.     float: left;  
  11.     height: 300px;  
  12.     width: 300px;  
  13.     margin: 50px;  
  14.     overflow: hidden;  
  15.     - webkit - box - shadow: 5px 5px 5px #111;  
  16. box-shadow: 5px 5px 5px # 111;  
  17. }
Code For This Effect And This Effect Called As FOCUS
  1. .focus {  
  2.     -webkit - transition: all 1s ease; - moz - transition: all 1s ease; - o - transition: all 1s ease; - ms - transition: all 1s ease;  
  3.     transition: all 1s ease;  
  4. }  
  5.   
  6. .focus: hover {  
  7.     border: 30px solid #000;  
  8. border-radius: 50%;  
  9. }
Output like This


Figure 1

Code For This Effect And This Effect Called As MORPH
  1. .morph {  
  2.     -webkit - transition: all 1s ease; - moz - transition: all 1s ease; - o - transition: all 1s ease; - ms - transition: all 1s ease;  
  3.     transition: all 1s ease;  
  4. }  
  5.   
  6. .morph: hover {  
  7.     border - radius: 50 % ; - webkit - transform: rotate(360deg); - moz - transform: rotate(360deg); - o - transform: rotate(360deg); - ms - transform: rotate(360deg);  
  8.     transform: rotate(360deg);  
  9. }
Output like This


Figure 2

Code For This Effect And This Effect Called As TILT
  1. .tilt {  
  2.     -webkit - transition: all 1s ease; - moz - transition: all 1s ease; - o - transition: all 1s ease; - ms - transition: all 1s ease;  
  3.     transition: all 1s ease;  
  4. }  
  5. .tilt: hover {  
  6.     -webkit - transform: rotate(-10deg); - moz - transform: rotate(-10deg); - o - transform: rotate(-10deg); - ms - transform: rotate(-10deg);  
  7.     transform: rotate(-10deg);  
  8. }
Output like This


Figure 3

Code For This Effect And This Effect Called As B&W
  1. .mani img {  
  2.     margin - top: 0px; - webkit - transition: margin 2s ease; - moz - transition: margin 2s ease; - o - transition: margin 2s ease; - ms - transition: margin 2s ease;  
  3.     transition: margin 2s ease;  
  4.   
  5.     - webkit - transition: all 0.5s ease; - moz - transition: all 2s ease; - o - transition: all 2s ease; - ms - transition: all 2s ease;  
  6.     transition: all 2s ease;  
  7. }  
  8.   
  9. .mani img: hover {  
  10.     margin - top: -200px;  
  11.     border - radius: 50 % ; - webkit - transform: rotate(360deg); - moz - transform: rotate(360deg); - o - transform: rotate(360deg); - ms - transform: rotate(360deg);  
  12.     transform: rotate(360deg);  
  13. }
Output like This


Figure 4

This Code For Two Remaining Images and This effect Called As VERTPAN
  1. .vertpan img {  
  2.     margin - top: 0px; - webkit - transition: margin 1s ease; - moz - transition: margin 1s ease; - o - transition: margin 1s ease; - ms - transition: margin 1s ease;  
  3.     transition: margin 1s ease;  
  4.   
  5. }  
  6.   
  7. .vertpan img: hover {  
  8.     margin - top: -200px;  
  9. }
Thank You
X

Build smarter apps with Machine Learning, Bots, Cognitive Services - Start free.

Start Learning Now