CODEWITHSUNDEEP
jquery.netcss
user1177313
user1177313

Reputation: 1

how to make an image transparent to the background slide show in asp.net

I am using a simple jquery for an image slideshow and it is working properly ,But the thing is that I want to place a small image over the slide show and that image should be transparent to the underlined image slide show, But I tried to place image slideshow in a big Div and for the image in a small div with in the same Slideshow div,but the slide show is working properly but I can't see the semi transparent image above it which is having less opacity .So kindly help me for solving the problem ...... this is how i places the two div......

<div class="logo">
   <img src="imag/header1.png" alt="" height="100%" width="100%" />

    </div>

  <div id="slideshow">



    <img src="imag/slider-1.jpg" alt="" class="active" height="100%" width="100%"/>
    <img src="imag/slider-2.jpg" alt="" height="100%" width="100%" />
    <img src="imag/slider-3.jpg" alt=""  height="100%" width="100%" />
    <img src="imag/slider-4.jpg" alt=""  height="100%" width="100%" />

   <img src="imag/slider-5.jpg" alt=""  height="100%" width="100%" />




</div>

css:

#slideshow {
    position:absolute;
    height:50%      /*300px*/;
    width:95.5%;
border-style:solid;
border-color:Red;  

}

#slideshow IMG {
    position:absolute;
    top:0;
    left:0;
    z-index:8;
}

#slideshow IMG.active {
    z-index:10;
}

#slideshow IMG.last-active {
    z-index:9;
}
div.logo
{
   position:relative;
    height:27%;
    width:100%;
    opacity:0.1;
  filter:alpha(opacity=60%); /* For IE8 and earlier */
  margin-top:0%;
  margin-left:0p%;
  zindex:1;


}

Upvotes: 0

Views: 2421

Answers (2)

mrtsherman
mrtsherman

Reputation: 39872

As you probably know, you can't include the logo in the slideshow div or it will become part of the slideshow. So instead place a container with relative positioning around the slideshow and the logo. Set the logo to absolute positioning and give it a high z-index so that it stays on top of the slides.

http://jsfiddle.net/jXJwG/2/

<div id="container" style="position: relative;">
    <div id="slideshow">
        <img src="http://placehold.it/300x300/ff0000" alt="" class="active" />
        <img src="http://placehold.it/300x300/ffff00" alt="" class="active" />
        <img src="http://placehold.it/300x300/ffffff" alt="" class="active" />    
    </div>
    <img src="http://placehold.it/60x60" alt="" style="position: absolute; top: 30px; right: 30px; z-index: 1000;" />
</div>

Upvotes: 1

Christopher Marshall
Christopher Marshall

Reputation: 10736

You can position:absolute the .logo div over top of the #slideshow div. Make sure you're using a 24-bit transparent .png file and set the z-index of #slideshow to be lower than the z-index of .logo

Looks like you also are missing a hyphen in the .logo styles on z-index

Upvotes: 0

Related Questions