Animer une image en CSS

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

Nederlandse vertaling

U hebt gevraagd om deze site in het Nederlands te bezoeken. Voor nu wordt alleen de interface vertaald, maar nog niet alle inhoud.

Als je me wilt helpen met vertalingen, is je bijdrage welkom. Het enige dat u hoeft te doen, is u op de site registreren en mij een bericht sturen waarin u wordt gevraagd om u toe te voegen aan de groep vertalers, zodat u de gewenste pagina's kunt vertalen. Een link onderaan elke vertaalde pagina geeft aan dat u de vertaler bent en heeft een link naar uw profiel.

Bij voorbaat dank.

Document heeft de 04/01/2014 gemaakt, de laatste keer de 02/04/2020 gewijzigd
Bron van het afgedrukte document:https://www.gaudry.be/nl/css-effet-image-survol-perspective.html

De infobrol is een persoonlijke site waarvan de inhoud uitsluitend mijn verantwoordelijkheid is. De tekst is beschikbaar onder CreativeCommons-licentie (BY-NC-SA). Meer info op de gebruiksvoorwaarden en de auteur.