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 the best way to do this using JavaScript or CSS?

Upvotes: 1

Answers (5)

qdev

Reputation: 1439

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):

Maybe this will help others in the future ;)

Razvan

Upvotes: 0

NakedBrunch

Reputation: 49413

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 enter image description here