Image mask over Nivo Slider

Question

I'm using Nivo slider, but want to place a PNG image over the slider so it only shows through the parts that are transparent. What would be the best way to do this using JavaScript or CSS?

Answer 1

Change the demo using the code below to see how this can be done. There are a lot of ways to do this so you should figure out what works best for your situation. The code below wraps the slider and another relatively placed image inside of the same div. A bit of CSS is used to position the the image and you can see the effect in action.

HTML

<div id="outer-wrapper">

            <div id="slider" class="nivoSlider">
                <img src="images/toystory.jpg" alt="" />
                <a href="http://dev7studios.com"><img src="images/up.jpg" alt="" title="This is an example of a caption" /></a>
                <img src="images/walle.jpg" alt="" />
                <img src="images/nemo.jpg" alt="" title="#htmlcaption" />
            </div>
            <div id="slider-mask"></div>
</div>  

CSS

#outer-wrapper {
    width:618px;
    height:246px;
    margin-left:190px;
}

#slider-mask {
    position:relative;
    background:url(images/mask.png) no-repeat;
    width:618px;
    height:246px;
    top:-246px;
    left:0;
    z-index:100;
}

Image Used

Screenshot of the effect