I'm currently utilizing JQuery slideUp/slideDown functionality to create an overlay effect on an image. This overlay is initially hidden, only appearing when the mouse hovers over the image and sliding up from the bottom.
The issue I'm facing is that the background color of the sliding div appears behind the image rather than on top of it. Even though the z-index is set to 100, the text displays over the image while only the bottom edge of the div's background color is visible due to the margins I've applied.
Any suggestions or solutions would be greatly appreciated. Thank you!
(function($) {
$(document).ready(function() {
$(".slider").attr("style", "display: none;");
if ($(".slider")) {
$('.image').mouseover(function() {
$(this).find(".slider").slideDown("400");
}).mouseout(function() {
$(this).find(".slider").slideUp("400");
});
}
});
}(jQuery));.image{
height: 300px;
width: 300px;
background: #000000;
}
.slider {
background-color: #333333 !important;
background: #333333 !important;
background-position: 0% 100%;
color: #ffffff;
margin: -90px 0 0 0;
height: 90px;
width: 100%;
z-index: 100 !important;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="image">
</div>
<div class="slider">
<div class="title">Title</div>
<div class="text">Text</div>
</div>
</div>