Bildunterschrift vertikal links von Bild stellen

Hallo zusammen, ich sitze seit einigen Stunden vor einer Herausforderung und brauche eure Hilfe: Ein Bild mit Bildunterschrift soll, beim Verkleinern der Viewport-Breite, beschnitten werden UND die innenliegende, horizontal angeordnete Bildunterschrift soll um 90° vertikal gegen den Uhrzeigersinn an dem linken Bildrand positioniert werden. Codebeispiel: https://codepen.io/anon/pen/bPyvbp

Der hier verwendete Code

<style> *{ margin:0; padding:0; } body { width: 80%; margin: 0 auto; display: flex; } .background-image { background-image: url(https://placeimg.com/300/200/nature); background-repeat: no-repeat; background-size: cover; flex:1; height:60vh; margin: 50px; display:flex; flex-direction: column; justify-content: flex-end; } p{ background-color: rgba(255, 0, 0, .3); width: 100%; color: white; height:4rem; line-height:4rem; font-size: 2rem; text-align: center; } @media (max-width: 800px) { .background-image { height: 60vh; } p{ width: 60vh; transform: rotate(-90deg); transform-origin:2rem center; } .helfer{ width:4rem; } } </style> <body> <div class="background-image"> <div class="helfer"> <p>Hallo Welt</p> </div> </div> <div class="background-image"> <div class="helfer"> <p>Hallo Welt</p> </div> </div> </body>

Add Comment

* Required information
1000
Drag & drop images (max 3)
Powered by Commentics

Comments

No comments yet. Be the first!