I created a div with image fading functionality using JavaScript and placed a static SVG logo on top of it. The issue I'm facing is that the logo appears somewhat transparent, allowing the image in the div to show through. Despite adjusting the z-index and opacity of the elements, I haven't been able to achieve the desired look.
Here is the snippet of my code:
<div class="main-slider-container">
<img src="img/logo.svg" class="img-responsive">
<div class="slideme" id="slideme"></div>
</div>
CSS:
.main-slider-container{
position:relative;
background: blue;
}
#slideme div{
position:absolute;
width:100%;
height:100%;
top:0px;
right:0px;
z-index:0;
border-bottom: 10px solid #000000;
}
> img {
position:absolute;
height:100%;
top:0px;
left:0px;
z-index:1;
}