1

How do you style a bootstrap carousel-caption like a gradient background with opacity control??

the browser render looks this way

my browser render looks this way!

okay this is the carousel I'm working on. i would like to tweak the carousel-caption to something like this (photoshop rendered image)

would love to have some gradient with opacity

I would love to have some gradient with opacity, to perfectly blend with. vignette also preferable. I've never done something this way before.

here'm my code. i've not done any styling than the bootstrap default styles.

<div id="myCarousel" class="carousel slide">
<div class="carousel-inner">
    <div class="item active">
    <img src="2.jpg" alt="img-responsive">
        <div class="carousel-caption">
            <h2>The worst of me suceeded by the best of You </h2>
        </div>          
    </div>
</div>

and the javascript

$(document).ready(function(){
    $('.carousel').carousel({
        interval:3000
    })
});

just controls the time intervals. bootstrap 3. 2.jpg is the picture shown. thanks for your help and sorry for my English.

  • 1
    possible duplicate of [Positioning and styling of Twitter Bootstrap Carousel Image Captions](http://stackoverflow.com/questions/16887484/positioning-and-styling-of-twitter-bootstrap-carousel-image-captions) – BENARD Patrick Apr 10 '14 at 13:19
  • thanks i would love to know about the gradient opacity part.. –  Apr 10 '14 at 13:20
  • http://stackoverflow.com/questions/2293910/css3-transparency-gradient – BENARD Patrick Apr 10 '14 at 13:21

1 Answers1

2

Here is a fiddle with a quick example of what you can do.

Fiddle

The CSS to make a gradient for webkit (Chrome) looks something like this

background: -webkit-gradient(linear, left top, left bottom, color-stop(20%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,1)));

If you are having troubles figuring out the CSS, take a look at this page for creating the gradients. Its a good start to making your own. The other stackoverflow post mentioned by @TheLittlePig in the comments is also very useful.

aludvigsen
  • 5,893
  • 3
  • 26
  • 37