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: <a href="https://codepen.io/anon/pen/bPyvbp">https://codepen.io/anon/pen/bPyvbp</a>
Code
<style>
*{
margin:0;
padding:0;
}
body {
width: 80%;
margin: 0 auto;
display: flex;
}
.background-image {
background-image: url(/image/nature.jpg);
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>