CODEWITHSUNDEEP
csshoverslideranchor
Rakhi
Rakhi

Reputation: 929

hover effect on link inside image slider not working

i have full width slider and i have button on each image with link but when i apply hover effect on first slider anchor tag its not working while its working for second slider,when i write a:hover{background:blue;} its not working for first slider.

here is my html

<ul class="cbp-bislideshow" id="cbp-bislideshow">
                <li style="background-image: url('images/slides/slide1.jpg'); opacity: 1;">
                    <div class="info">
                        <h2>The Real Thing</h2> <label>Quality. Beauty. Durability. Only from </label>
                        <a class="link" title="Get Inspired" href="#"><span>Get Inspired</span></a>
                    </div>
                    <img alt="image01" src="images/slides/slide1.jpg">
                </li>
                <li style="background-image: url('images/slides/slide2.jpg'); opacity: 0;"> 
                    <div class="info">
                        <h2>The Real Thing2</h2> <label>Quality. Beauty. Durability. Only from.</label>
                        <a class="link" title="Get Inspired" href="#"><span>Get Inspired</span></a>
                    </div>
                    <img alt="image02" src="images/slides/slide2.jpg">
                </li>
            </ul>

i use this slider http://tympanus.net/Blueprints/BackgroundSlideshow/

Upvotes: 0

Views: 1265

Answers (2)

user2477139
user2477139

Reputation: 606

try

.info{
z-index:999;
position:relative;
}

Upvotes: 1

RustyCollins
RustyCollins

Reputation: 349

Might be because of the order in which you've got your elements.

Try setting the elements out like below. If you're trying to do what I think you are the image will be covering the html above it so the hover effect won't work.

    <li style="background-image: url('images/slides/slide2.jpg'); opacity: 0;"> 
                <img alt="image02" src="images/slides/slide2.jpg">
                <div class="info">
                    <h2>The Real Thing2</h2> <label>Quality. Beauty. Durability. Only from.</label>
                    <a class="link" title="Get Inspired" href="#"><span>Get Inspired</span></a>
                </div>
            </li>

Upvotes: 1

Related Questions