CODEWITHSUNDEEP
javascriptjqueryhtmlcsstwitter-bootstrap
user3348051
user3348051

Reputation:

how to style bootstrap carousel-caption?

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.

Upvotes: 1

Views: 4685

Answers (1)

aludvigsen
aludvigsen

Reputation: 5981

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.

Upvotes: 2

Related Questions