slideshow image mouseover dropdown css

Question

I made a automatic image slideshow. I want to make a dropdown image when I mouseover the slideshow image. I have put dropdown css, html code but it didn't work. Is there any solution for this?

css code html code

I want to make a dropdown image when I mouseover the slideshow image.

Answer 1

Most likely because the 'height' attribute is missing in css. Here is your code simplified and it works fine:

.dd {
  position: relative;
  display: inline-blick;
  width: 200px;
  height: 200px;
  background: green;
}

.dc {
  display: none;
  position: absolute;
  z-index: 1;
  width: 100px;
  height: 100px;
  background: silver;
}

.dd:hover .dc {
  display: block;
}

<div class='dd sl'>
  <div class='dc'>

  </div>
</div>

Additionally, it is better no to write styles inside the markup style attribute but inside the css file or block.