Stuart Stuart - 1 day ago 4
CSS Question

JQuery SlideUp - Background Color Behind Image

I am using JQuery slideUp/slideDown to add an overlay to an image that is hidden until mouseover and then slides up from the bottom of the image.

The div that is sliding up is given a background color, but it doesn't show up over the image, it shows up behind it (the text shows up on top of the image, but I can just see the bottom edge of the div's background color because of the margins I set). Z-index is already set to 100.

Any ideas? Thanks!



(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>




Answer

It's better to define display: none; for slider in css rule. Also to bind mouseenter and mouseleave to container will prevent jumping slider when mouse is leaving image and moving over slider.

$('.container').on("mouseenter", function() {
    $(".slider").slideDown();
  });
  $('.container').on("mouseleave", function() {
    $(".slider").slideUp("400");
  });
.container {
  width: 300px;
}
.image{
  height: 300px;
  width: 300px;
  background: #000000;
}
.slider {
  background-color: #333333;
  color: #ffffff;
  margin: -90px 0 0 0;
  height: 90px;
  width: 100%;
  display: none;
}
<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>

Comments