Повернуть заголовок слайд-шоу и выровнять по правому краю ⇐ CSS

[Anonymous]

Здесь я нашел слайд-шоу, которое мне понравилось: https://codepen.io/AndresUris/pen/rGXpvE
Я хотел добавить заголовок справа от изображения. это было повернуто... примерно так: текст, повернутый на 90 градусов, выровнен по правому верхнему краю страницы с помощью CSS
Итак, я добавил заголовок и включил текст, но выравнивание выглядит все шаткое. Я пытался исправить это с помощью CSS, но у меня не получилось.
HTML:

Код: Выделить всё

    /* Slider */
/* Slideshow container */
#slide-container {
position: relative;
max-width: 800px; /* responsiveness */
}

/* First element to be in block mode for responsiveness */
#slide-first-element {
display: block; /* to get the dimensions set */
width: 100%;
height: auto;
}

/* Other element to be in absolute position */
#slide-element-2,
#slide-element-3 {
position: absolute;
width: 100%;
height: 100%;
top: 0;
bottom: 0;
left: 0;
right: 0;
}

/* Style images */
.slide-image {
width: 100%;
}

/* Style text */
.slide-text {
position: absolute;
right: -35%;
top: 50%;
background-color: #ff0000;
color: white;
width: 70%;
text-align: center;
font-size: 1.5rem;
transform: rotate(-90deg);

-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
}

/* Animation settings for individual elements */
/* For more images the animations have to be adjusted */
#slide-first-element {
animation: fade-1 10s infinite;
-webkit-animation: fade-1 10s infinite;
}

#slide-element-2 {
animation: fade-2 10s infinite;
-webkit-animation: fade-2 10s infinite;
}

#slide-element-3 {
animation: fade-3 10s infinite;
-webkit-animation: fade-3 10s infinite;
}

@keyframes fade-1 {
0% {
opacity: 1;
}
33% {
opacity: 0;
}
66% {
opacity: 0;
}
100% {
opacity: 1;
}
}

@keyframes fade-2 {
0% {
opacity: 0;
}
33% {
opacity: 1;
}
66% {
opacity: 0;
}
100% {
opacity: 0;
}
}

@keyframes fade-3 {
0% {
opacity: 0;
}
33% {
opacity: 0;
}
66% {
opacity: 1;
}
100% {
opacity: 0;
}
}

/* example for a 4th slide */
@keyframes fade-4 {
0% {
opacity: 0;
}
25% {
opacity: 0;
}
50% {
opacity: 0;
}
75% {
opacity: 1;
}
100% {
opacity: 0;
}
}

Код: Выделить всё

 

[img]https://images.unsplash.com/photo-1486312338219-ce68d2c6f44d?w=752&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D[/img]
Beautiful

[img]https://images.unsplash.com/photo-1488590528505-98d2b5aba04b?w=750&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D[/img]
Amazing

[img]https://images.unsplash.com/photo-1498753427761-548428edfa67?w=889&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D[/img]
Incredible

Кто-нибудь знает, что я могу настроить, чтобы это заработало? Когда текст поворачивается, высота становится шириной, а левое становится правым. Но даже используя эту логику, это трудно понять. Можно ли использовать что-нибудь более простое?
Спасибо,

Джош

Подробнее здесь: https://stackoverflow.com/questions/785 ... lign-right