NetPlusMédia - Effet de survol en camembert en CSS3
NetPlusMédia
Accueil
Notre métier
Nous contacter
Accueil
Notre métier
Nous contacter

Effet de survol en camembert en CSS3

Retour

Sources

Télécharger le fichier

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'>
  5. <title>Effet de survol en camembert en CSS3</title>
  6. <meta http-equiv='content-type' content='text/html; charset=iso-8859-1'/>
  7.  
  8.  
  9. <!-- Style CSS -->
  10. <link rel='stylesheet' type='text/css' href='camembert.css' />
  11.  
  12.  
  13.  
  14. </head>
  16.  
  17.  
  18. Survolé le carré ci-dessous<br />
  19. <br />
  20. <div class="circle">
  21.  
  22.  <img src="http://placekitten.com/g/500/500" />
  23.  
  24.  <div class="mask-top-container">
  25.  <div class="mask-top"></div>
  26.  </div>
  27.  <div class="mask-bottom-container">
  28.  <div class="mask-bottom"></div>
  29.  </div>
  30.  
  31. </div>
  32.  
  33.  
  34. <!-- Javascript -->
  35.  
  36. </body>
  37. </html>
Télécharger le fichier

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

Plan du site - Contact - Google+ - FaceBook - Twitter