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. }
  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. }
  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;
  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. }
  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;
  5. }
  7. .vertpan img: hover {
  8. margin - top: -200px;
  9. }
Thank You