NetPlusMédia

Effet de survol en camembert en CSS3

Retour

Sources

camembert.html

  1. <!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN'
  2. 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>
  3. <html xmlns='http://www.w3.org/1999/xhtml' xml:lang='fr' lang='fr'>
  4. <title>Effet de survol en camembert en CSS3</title>
  5. <meta http-equiv='content-type' content='text/html; charset=iso-8859-1'/>
  6.  
  7.  
  8. <!-- Style CSS -->
  9. <link rel='stylesheet' type='text/css' href='camembert.css' />
  10.  
  11.  
  12.  
  13. </head>
  14.  
  15.  
  16. Survol le carr ci-dessous<br />
  17. <br />
  18. <div class="circle">
  19.  
  20. <img src="http://placekitten.com/g/500/500" />
  21.  
  22. <div class="mask-top-container">
  23. <div class="mask-top"></div>
  24. </div>
  25. <div class="mask-bottom-container">
  26. <div class="mask-bottom"></div>
  27. </div>
  28.  
  29. </div>
  30.  
  31.  
  32. <!-- Javascript -->
  33.  
  34. </body>
  35. </html>

camembert.css

  1. .circle {
  2. float:left;
  3. position: relative;
  4. width: 250px;
  5. height: 250px;
  6. border:1px solid #000;
  7. overflow: hidden;
  8. }
  9.  
  10. .circle img {
  11. width: 100%;
  12. height: 100%;
  13. border: 10px solid #00aaff;
  14.  
  15. -webkit-border-radius:50%;
  16. -khtml-border-radius:50%;
  17. -moz-border-radius:50%;
  18. -ms-border-radius:50%;
  19. -o-border-radius:50%;
  20. border-radius:50%;
  21.  
  22. -webkit-box-sizing:border-box;
  23. -khtml-box-sizing:border-box;
  24. -moz-box-sizing:border-box;
  25. -ms-box-sizing:border-box;
  26. -o-box-sizing:border-box;
  27. box-sizing:border-box;
  28. }
  29.  
  30. .circle .mask-top-container, .circle .mask-bottom-container {
  31. position: absolute;
  32. top: -1px;
  33. left: -1px;
  34. width: 101%;
  35. height: 51%;
  36. overflow: hidden;
  37. }
  38.  
  39. .circle .mask-bottom-container {
  40. top: 50%;
  41. }
  42.  
  43. .circle .mask-top, .circle .mask-bottom {
  44. width: 100%;
  45. height: 100%;
  46. background: #fff;
  47.  
  48. -webkit-transition:all 500ms ease-in-out;
  49. -khtml-transition:all 500ms ease-in-out;
  50. -moz-transition:all 500ms ease-in-out;
  51. -ms-transition:all 500ms ease-in-out;
  52. -o-transition:all 500ms ease-in-out;
  53. transition:all 500ms ease-in-out;
  54.  
  55. -webkit-transform-origin:50% 100%;
  56. -khtml-transform-origin:50% 100%;
  57. -moz-transform-origin:50% 100%;
  58. -ms-transform-origin:50% 100%;
  59. -o-transform-origin:50% 100%;
  60. transform-origin:50% 100%;
  61.  
  62. -webkit-backface-visibility: hidden;
  63. -khtml-backface-visibility: hidden;
  64. -moz-backface-visibility: hidden;
  65. -ms-backface-visibility: hidden;
  66. -o-backface-visibility: hidden;
  67. backface-visibility: hidden;
  68. }
  69.  
  70. .circle .mask-bottom {
  71. -webkit-transform-origin:50% 0%;
  72. -khtml-transform-origin:50% 0%;
  73. -moz-transform-origin:50% 0%;
  74. -ms-transform-origin:50% 0%;
  75. -o-transform-origin:50% 0%;
  76. transform-origin:50% 0%;
  77. }
  78.  
  79. .circle:hover .mask-top{
  80. -webkit-transform:rotate(180deg);
  81. -khtml-transform:rotate(180deg);
  82. -moz-transform:rotate(180deg);
  83. -ms-transform:rotate(180deg);
  84. -o-transform:rotate(180deg);
  85. transform:rotate(180deg);
  86. }
  87.  
  88. .circle:hover .mask-bottom{
  89. -webkit-transform:rotate(-180deg);
  90. -khtml-transform:rotate(-180deg);
  91. -moz-transform:rotate(-180deg);
  92. -ms-transform:rotate(-180deg);
  93. -o-transform:rotate(-180deg);
  94. transform:rotate(-180deg);
  95. }

Démonstration

Effet de survol en camembert en CSS3 Survol le carr ci-dessous

Laissez-nous un commentaire


Votre pseudo/nom/prénom :
Votre commentaire :
Plan du site - Contact - Google+ - FaceBook - Twitter