Diagonal and responsive caption overlay for bootstrap carousel?

[pierrebalian]

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

[Paulie_D]

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

Are we overlaying the images or the whole carousel?

[bearhead]

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

[Author]

Posts