Image mask over Nivo Slider

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 th开发者_运维问答e best way to do this using JavaScript or CSS?

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

look this slider (example).

Just set the PNG to be absolute positioned and move it over top of the nivo slider. Make sure that the z-index is set to be above the slider.

absolute positioned divs when placed with in relative positioned div than they give your required result.

position your nivo slider container as relative positioned and put the mask div within the nivo slider container and position that absolute.

hope it will help you

I had the same task from my designer, meaning to place some mask over the animations.

This was the easy part !!! The complicated part was to:

• make links work again
• to have back animation pause on mouse over them;
• to place the controlNav buttons over the image and also make them work...

So, I had to develop and use this (done by me, and explained in detail over there):

• http://support.dev7studios.com/discussions/nivo-slider/1371-moving-controlnav-outside-slider-on-a-separate-container-wrapper
• http://support.dev7studios.com/discussions/nivo-slider/1375-trick-adding-custom-layer-for-anchors-on-images-completely-outside-the-slider

Maybe this will help others in the future ;)

Razvan