Html Question posted in
Some basic documentation can be found here.

Html – Rotate Slideshow Caption and Align Right

I found a slideshow I like here: https://codepen.io/AndresUris/pen/rGXpvE

What I wanted to do was add a title to the right of the image that was rotated…kind of like this: 90 degrees rotated text, flush to page top-right with CSS

So, I added a title and incorporated the text, but the alignment looks all wonky. I tried to fix it with some css, but I can’t quite get it right.

The 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;
        }
    }
 <div id="slide-container">
        <div id="slide-first-element">
            <img class="slide-image" src="https://images.unsplash.com/photo-1486312338219-ce68d2c6f44d?w=752&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D">
            <p class="slide-text">Beautiful</p>
        </div>
        <div id="slide-element-2">
            <img class="slide-image" src="https://images.unsplash.com/photo-1488590528505-98d2b5aba04b?w=750&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D">
            <p class="slide-text">Amazing</p>
        </div>
        <div id="slide-element-3">
            <img class="slide-image" src="https://images.unsplash.com/photo-1498753427761-548428edfa67?w=889&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D">
            <p class="slide-text">Incredible</p>
        </div>
    </div>

Anyone know what I can tweak to get this working? Once the text gets rotated, it’s like the height becomes the width and left becomes right. But, even using that logic makes it hard to figure out. Is there something more straightforward I can use?

Thanks,
Josh

Tags:

2

Answers


  1. 0 
    /* 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: 0;
    top: 0;
    background-color: #ff0000;
    color: white;
    width: 200px; /* Adjust the width according to your needs */
    text-align: center;
    font-size: 1.5rem;
    transform-origin: top right;
    transform: translateX(100%) rotate(-90deg);
    
    /* Vendor prefixes for older browsers */
    -webkit-transform-origin: top right;
    -webkit-transform: translateX(100%) rotate(-90deg);
    -moz-transform-origin: top right;
    -moz-transform: translateX(100%) rotate(-90deg);
    -ms-transform-origin: top right;
    -ms-transform: translateX(100%) rotate(-90deg);
    -o-transform-origin: top right;
    -o-transform: translateX(100%) 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;
    }
}
    <div id="slide-container">
        <div id="slide-first-element">
            <img class="slide-image" src="https://images.unsplash.com/photo-1486312338219-ce68d2c6f44d?w=752&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D">
            <p class="slide-text">Beautiful</p>
        </div>
        <div id="slide-element-2">
            <img class="slide-image" src="https://images.unsplash.com/photo-1488590528505-98d2b5aba04b?w=750&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D">
            <p class="slide-text">Amazing</p>
        </div>
        <div id="slide-element-3">
            <img class="slide-image" src="https://images.unsplash.com/photo-1498753427761-548428edfa67?w=889&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D">
            <p class="slide-text">Incredible</p>
        </div>
    </div>
    Login or Signup to reply.
  2. 0

    Don’t rely on rotation, using writing-mode instead. I also remove a lot of useless code

    #slide-container {
  position: relative;
  max-width: 800px;
}

#slide-element-2,
#slide-element-3 {
  position: absolute;
  inset: 0;
}

.slide-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.slide-text {
  position: absolute;
  top:0;
  bottom:0;
  right:0;
  writing-mode: vertical-rl;
  transform: scale(-1);
  background-color: #ff0000;
  color: white;
  text-align: center;
  font-size: 1.5rem;
  margin: 0;
}

#slide-first-element {
  animation: fade-1 10s infinite;
}

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

#slide-element-3 {
  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;
  }
}
    <div id="slide-container">
  <div id="slide-first-element">
    <img class="slide-image" src="https://images.unsplash.com/photo-1486312338219-ce68d2c6f44d?w=752&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D">
    <p class="slide-text">Beautiful</p>
  </div>
  <div id="slide-element-2">
    <img class="slide-image" src="https://images.unsplash.com/photo-1488590528505-98d2b5aba04b?w=750&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D">
    <p class="slide-text">Amazing</p>
  </div>
  <div id="slide-element-3">
    <img class="slide-image" src="https://images.unsplash.com/photo-1498753427761-548428edfa67?w=889&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D">
    <p class="slide-text">Incredible</p>
  </div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search