CODEWITHSUNDEEP
javascripthtmlcsstwitter-bootstrap
boby lapointe
boby lapointe

Reputation: 535

How do i add a mask on top of a bootstrap element?

I'm using bootstrap's carousel ( http://twitter.github.com/bootstrap/javascript.html#carousel ) to show a user submited gallery. Because it's user submited, it doesnt look very good with the rest of my website design thats why i want to add a layer mask on top off everything

Here is the mask : http://img52.imageshack.us/img52/2659/degrade.png Unfortunatly, I'm unable to show that particular div... It has to be non clickable because when a user click on a picture of the carousel, it opens modal popup with the full sized picture.

My css (its using less but you get the idea):

.carousel {
  width: 292px;
  height: 163px;

  .carousel-inner {
    width: 292px;
    height: 163px;

    img {
      width: 100%;
      height: 100%;
    }
  }
}

.carousel-control {
  margin-top: 0;
  top: 0;
  right: 0;
  background: none;
  border: 0;
  width: 60px;
  height: 163px;
  opacity: 0.65;
  background-repeat: no-repeat;

    &:hover.right {
      background-image: url('/assets/index/r_arrow.png');
    }

    &:hover.left {
      background-image: url('/assets/index/l_arrow.png');
    }
}

heres is my html:

<div class="carousel slide">
    <div class="carousel-inner">
        <div class="item active">
            <a href="popup_img1.htm"><img src="thumbnail1.jpg" /></a>
        </div>
        <div class="item">
            <a href="popup_img2.htm"><img src="thumbnail2.jpg" /></a>
        </div>
        <div class="item">
            <a href="popup_img3.htm"><img src="thumbnail3.jpg" /></a>
        </div>
     </div>
     <a class="carousel-control left" href=".carousel" data-slide="prev">&nbsp;</a>
     <a class="carousel-control right" href=".carousel" data-slide="next">&nbsp;</a>
 </div>

Upvotes: 2

Views: 9937

Answers (1)

crowjonah
crowjonah

Reputation: 2878

Depending on your cross-browser support needs, you could try giving the overlay pointer-events: none. Here's an example of that.

If you insert <div class="overlay"></div> into .carousel-inner, give .carousel-inner {position: relative;} and

.overlay {
    background: url(http://img52.imageshack.us/img52/2659/degrade.png) top left no-repeat;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
    pointer-events: none;
}

There's an answer here that gives information and links to solutions using javascript. Unfortunately, the resources for the accepted answer to the linked question have gone offline, but there is a fairly simple demonstration here: http://jsbin.com/uhuto

Upvotes: 3

Related Questions