Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Diagonal and responsive caption overlay for bootstrap carousel?

  • This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #239953
    pierrebalian
    Participant

    Hello,

    I am trying to create a caption overlay for a bootstrap carousel without resorting to transforms and overflow-hidden.

    Is there an easy way to do this with gradients or some other method?

    Here is a mockup of what I am trying to achieve:
    http://s22.postimg.org/oiy9jin69/hoco_slider_don3.jpg

    #239954
    Paulie_D
    Moderator

    I suspect overflow hidden will be required in most cases….overlays usually do.

    Are we overlaying the images or the whole carousel?

    #239955
    bearhead
    Participant

    The exact implementation will depend on your html structure but you could get the look you’re after with a css gradient:

    background-image:
        linear-gradient(
          -65deg, 
          rgba(0,0,0,.7) 60%, rgba(0,0,0,0) 60.2%
        );
    

    Example:
    http://codepen.io/kvana/pen/ONjEYv

Viewing 3 posts - 1 through 3 (of 3 total)
  • The forum ‘CSS’ is closed to new topics and replies.