Animer une image en CSS

Table des matières
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. }

Document créé le 04/01/2014, dernière modification le 02/04/2020
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.