Animer une image en CSS

Ce code était utilisé dans la galerie photo.

Le code HTML

  1. <!--début du code
  2. .../
  3. -->
  4. <div class="brol-t-thumb brol-t-next">
  5.   <a
  6.     href="https://www.gaudry.be/photos/044060550502405919118114.html"
  7.     title="Photo suivante: Lever de soleil sur Angkor Vat" class="photo-thumb-link"
  8.     id="next-photo-tmb"
  9.   >
  10.     <img
  11.       src="https://www.gaudry.be/photo-rf-044060550502405919118114.jpg"
  12.       alt="Lever de soleil sur Angkor Vat (miniature)"
  13.     /><span>Photo suivante &gt;&gt;</span>
  14.   </a>
  15. </div>
  16. <!--
  17. /...
  18. fin du code
  19. -->

Le code LESS

  1. @bookThumbSpace:40px;
  2. html:not(.no-details) .brol-t-next a{
  3.   background-image:url("https://www.gaudry.be/photo-rf-044060550502405919118114.jpg");
  4. }
  5. .no-details{
  6.   .brol-t-thumb a span{
  7.     display:none;
  8.   }
  9. }
  10. html:not(.no-details){
  11.   .brol-t-next{
  12.      float:right;
  13.     padding-right:@bookThumbSpace;
  14.   }
  15.  
  16.   .brol-t-prev{
  17.      float:left;
  18.     padding-left:@bookThumbSpace;
  19.   }
  20.   .brol-t-thumb {
  21.       width: 150px;
  22.       height: 150px;
  23.       margin: @bookThumbSpace auto 10px;
  24.     perspective: 1000px;
  25.      
  26.   }
  27.   .brol-t-thumb:hover{
  28.     perspective: 0px;
  29.      
  30.   }
  31.   brol-t-thumb:before, .brol-t-thumb, .brol-t-thumb:after {
  32.       box-sizing: initial;
  33.   }
  34.  
  35.   .brol-t-thumb a {
  36.       display: block;
  37.       width: 100%;
  38.       height: 100%;
  39.       background-size: 150px, cover;
  40.  
  41.       transform-style: preserve-3d;
  42.       transition: all 0.5s;
  43.       transform: rotateX(80deg);
  44.   }
  45.  
  46.   .brol-t-thumb:hover a {
  47.       transform: rotateX(0deg);
  48.       transform-origin: bottom;
  49.   }
  50.  
  51.   .brol-t-thumb a:before {
  52.       content: '';
  53.       position: absolute;
  54.       top: 0;
  55.       left: 0;
  56.       width: 100%;
  57.       height: 100%;
  58.       background: rgba(0, 0, 0, 0.5);
  59.       transition: all 0.5s;
  60.       box-shadow: 0 0 25px 25px rgba(0, 0, 0, 0.5);
  61.       opacity: 1;
  62.    
  63.    
  64.       transform: rotateX(0) translateZ(-60px) scale(0.85);
  65.   }
  66.   .brol-t-thumb img {
  67.       display: none;
  68.   }
  69.   .brol-t-thumb:hover a:before {
  70.       opacity: 0.50;
  71.       box-shadow: 0 0 50px 50px rgba(0, 0, 0, 0.5);
  72.       transform: rotateX(95deg) translateZ(-80px) scale(0.75);
  73.       transform-origin: bottom;
  74.   }
  75.  
  76.   .brol-t-thumb a:after {
  77.       content: '';
  78.       position: absolute;
  79.       left: 0;
  80.       bottom: 0;
  81.       width: 100%;
  82.       height: 36px;
  83.       background: inherit;
  84.       background-size: cover, cover;
  85.       background-position: bottom;
  86.       transform: rotateX(90deg);
  87.       transform-origin: bottom;
  88.   }
  89.   .brol-t-thumb a span {
  90.     background-color: rgb(59, 80, 85, 0.5);/* the book cover*/
  91.       color: white;
  92.       text-transform: uppercase;
  93.       position: absolute;
  94.       top: 100%;
  95.       left: 0;
  96.       width: 100%;
  97.       font: bold 12px/36px "Open Sans";
  98.       text-align: center;
  99.       transform: rotateX(-89.99deg);
  100.       transform-origin: top;
  101.       z-index: 1;
  102.     visibility:visible;
  103.   }
  104.   .brol-t-thumb:hover a span {
  105.     visibility:hidden;
  106.   }
  107. }

Le code CSS

  1. html:not(.no-details) .brol-t-next a {
  2.   background-image: url("https://www.gaudry.be/photo-rf-044060550502405919118114.jpg");
  3. }
  4. .no-details .brol-t-thumb a span {
  5.   display: none;
  6. }
  7. html:not(.no-details) .brol-t-next {
  8.   float: right;
  9.   padding-right: 40px;
  10. }
  11. html:not(.no-details) .brol-t-prev {
  12.   float: left;
  13.   padding-left: 40px;
  14. }
  15. html:not(.no-details) .brol-t-thumb {
  16.   width: 150px;
  17.   height: 150px;
  18.   margin: 40px auto 10px;
  19.   perspective: 1000px;
  20. }
  21. html:not(.no-details) .brol-t-thumb:hover {
  22.   perspective: 0px;
  23. }
  24. html:not(.no-details) brol-t-thumb:before,
  25. html:not(.no-details) .brol-t-thumb,
  26. html:not(.no-details) .brol-t-thumb:after {
  27.   box-sizing: initial;
  28. }
  29. html:not(.no-details) .brol-t-thumb a {
  30.   display: block;
  31.   width: 100%;
  32.   height: 100%;
  33.   background-size: 150px, cover;
  34.   transform-style: preserve-3d;
  35.   transition: all 0.5s;
  36.   transform: rotateX(80deg);
  37. }
  38. html:not(.no-details) .brol-t-thumb:hover a {
  39.   transform: rotateX(0deg);
  40.   transform-origin: bottom;
  41. }
  42. html:not(.no-details) .brol-t-thumb a:before {
  43.   content: '';
  44.   position: absolute;
  45.   top: 0;
  46.   left: 0;
  47.   width: 100%;
  48.   height: 100%;
  49.   background: rgba(0,0,0,0.5);
  50.   transition: all 0.5s;
  51.   box-shadow: 0 0 25px 25px rgba(0,0,0,0.5);
  52.   opacity: 1;
  53.   transform: rotateX(0) translateZ(-60px) scale(0.85);
  54. }
  55. html:not(.no-details) .brol-t-thumb img {
  56.   display: none;
  57. }
  58. html:not(.no-details) .brol-t-thumb:hover a:before {
  59.   opacity: 0.50;
  60.   box-shadow: 0 0 50px 50px rgba(0,0,0,0.5);
  61.   transform: rotateX(95deg) translateZ(-80px) scale(0.75);
  62.   transform-origin: bottom;
  63. }
  64. html:not(.no-details) .brol-t-thumb a:after {
  65.   content: '';
  66.   position: absolute;
  67.   left: 0;
  68.   bottom: 0;
  69.   width: 100%;
  70.   height: 36px;
  71.   background: inherit;
  72.   background-size: cover, cover;
  73.   background-position: bottom;
  74.   transform: rotateX(90deg);
  75.   transform-origin: bottom;
  76. }
  77. html:not(.no-details) .brol-t-thumb a span {
  78.   background-color: rgba(59,80,85,0.5);
  79.   color: white;
  80.   text-transform: uppercase;
  81.   position: absolute;
  82.   top: 100%;
  83.   left: 0;
  84.   width: 100%;
  85.   font: bold 12px/36px "Open Sans";
  86.   text-align: center;
  87.   transform: rotateX(-89.99deg);
  88.   transform-origin: top;
  89.   z-index: 1;
  90.   visibility: visible;
  91. }
  92. html:not(.no-details) .brol-t-thumb:hover a span {
  93.   visibility: hidden;
  94. }

Table des matières Haut

Document créé le 04/01/2014, dernière modification le 29/10/2019
Source du document imprimé : https://www.gaudry.be/css-effet-image-survol-perspective.html

L'infobrol est un site personnel dont le contenu n'engage que moi. Le texte est mis à disposition sous licence CreativeCommons(BY-NC-SA). Plus d'info sur les conditions d'utilisation et sur l'auteur.