3D-Special-Effekt
Wie kannst Du den 3D-Effekt auf deine Bilder anwenden?
- Kopiere Dir alles aus dem unteren Style-Code
- Erstelle Dir eine neue Seite
- Zeile und Spalte so wie Du es möchtest
- Füge ein Code-Modul ein
- Nun musst Du den zuvor kopierten Style in das Code-Modul einfügen
- Im Style-Code kannst Du dein gewünschtes Bild einfügen, dafür musst Du den Link zur Bilddatei austauschen. Den Link deines Bildes siehst Du, wenn Du in deinen Medien auf ein passendes Bild klickst. Nun solltest Du oben rechts den Link sehen und kopieren.
- Wenn Du mehr als nur eine Bild auf deine Seite mit diesem Effekt erstellen möchtest, musst Du ein weiteres Code-Modul erstellen, den Code einfügen, aber die CSS-Klasse anpassen.
Aus “.thumb” wird dann z.B. “.thumb2”
Style Code 1
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
<style> .thumb { width: 400px; height: 300px; margin: 70px auto; perspective: 1000px; } .thumb a { display: block; width: 100%; height: 100%; background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url("https://DEIN_LINK_ZUM_BILD.jpg"); border:0px solid #3b3b3b; outline: 3px solid #ededed; outline-offset: -6px; background-size: 0, cover; transform-style: preserve-3d; transition: all 0.5s; } .thumb:hover a { transform: rotateX(80deg); transform-origin: bottom; } .thumb a:after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 36px; background: inherit; background-size: cover, cover; background-position: bottom; transform: rotateX(90deg); transform-origin: bottom; } .thumb a span { color: white; text-transform: uppercase; position: absolute; top: 100%; left: 0; width: 100%; font: bold 12px/36px Montserrat; text-align: center; transform: rotateX(-89.99deg); transform-origin: top; z-index: 1; } .thumb a:before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); box-shadow: 0 0 100px 50px rgba(0, 0, 0, 0.5); transition: all 0.5s; opacity: 0.15; transform: rotateX(95deg) translateZ(-80px) scale(0.75); transform-origin: bottom; } .thumb:hover a:before { opacity: 1; box-shadow: 0 0 25px 25px rgba(0, 0, 0, 0.5); transform: rotateX(0) translateZ(-60px) scale(0.85); } </style><div class="thumb"> <a rel="nofollow" rel="noreferrer"href="#"><span>3D Special-Effekt</span></a> </div><script></script> |
Style Code 1
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
<style> .thumb2 { width: 400px; height: 300px; margin: 70px auto; perspective: 1000px; } .thumb2 a { display: block; width: 100%; height: 100%; background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url("https://DEIN_LINK_ZUM_BILD"); border:0px solid #3b3b3b; outline: 3px solid #ededed; outline-offset: -6px; background-size: 0, cover; transform-style: preserve-3d; transition: all 0.5s; } .thumb2:hover a { transform: rotateX(80deg); transform-origin: bottom; } .thumb2 a:after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 36px; background: inherit; background-size: cover, cover; background-position: bottom; transform: rotateX(90deg); transform-origin: bottom; } .thumb2 a span { color: white; text-transform: uppercase; position: absolute; top: 100%; left: 0; width: 100%; font: bold 12px/36px Montserrat; text-align: center; transform: rotateX(-89.99deg); transform-origin: top; z-index: 1; } .thumb2 a:before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); box-shadow: 0 0 100px 50px rgba(0, 0, 0, 0.5); transition: all 0.5s; opacity: 0.15; transform: rotateX(95deg) translateZ(-80px) scale(0.75); transform-origin: bottom; } .thumb2:hover a:before { opacity: 1; box-shadow: 0 0 25px 25px rgba(0, 0, 0, 0.5); transform: rotateX(0) translateZ(-60px) scale(0.85); } </style><div class="thumb2"> <a rel="nofollow" rel="noreferrer"href="#"><span>3D Special-Effekt</span></a> </div><script></script> |