Animer une image en CSS

Contents
Lever de soleil sur Angkor Vat (miniature)Photo suivante >>

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. }

English translation

You have asked to visit this site in English. For now, only the interface is translated, but not all the content yet.

If you want to help me in translations, your contribution is welcome. All you need to do is register on the site, and send me a message asking me to add you to the group of translators, which will give you the opportunity to translate the pages you want. A link at the bottom of each translated page indicates that you are the translator, and has a link to your profile.

Thank you in advance.

Document created the 04/01/2014, last modified the 02/04/2020
Source of the printed document:https://www.gaudry.be/en/css-effet-image-survol-perspective.html

The infobrol is a personal site whose content is my sole responsibility. The text is available under CreativeCommons license (BY-NC-SA). More info on the terms of use and the author.