Animer une image en CSS

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

Deutsche Übersetzung

Sie haben gebeten, diese Seite auf Deutsch zu besuchen. Momentan ist nur die Oberfläche übersetzt, aber noch nicht der gesamte Inhalt.

Wenn Sie mir bei Übersetzungen helfen wollen, ist Ihr Beitrag willkommen. Alles, was Sie tun müssen, ist, sich auf der Website zu registrieren und mir eine Nachricht zu schicken, in der Sie gebeten werden, Sie der Gruppe der Übersetzer hinzuzufügen, die Ihnen die Möglichkeit gibt, die gewünschten Seiten zu übersetzen. Ein Link am Ende jeder übersetzten Seite zeigt an, dass Sie der Übersetzer sind und einen Link zu Ihrem Profil haben.

Vielen Dank im Voraus.

Dokument erstellt 04/01/2014, zuletzt geändert 02/04/2020
Quelle des gedruckten Dokuments:https://www.gaudry.be/de/css-effet-image-survol-perspective.html

Die Infobro ist eine persönliche Seite, deren Inhalt in meiner alleinigen Verantwortung liegt. Der Text ist unter der CreativeCommons-Lizenz (BY-NC-SA) verfügbar. Weitere Informationen auf die Nutzungsbedingungen und dem Autor.