As I continue my journey of learning CSS, I've encountered a puzzling issue involving slide-in captions within a different div element. The problem arises when I try to customize the appearance of the caption to better fit the overall design of my webpage – instead of sliding in smoothly, all the captions end up popping up at the bottom of the background div.
If you take a look at THIS link, you'll see how the figure behaves without any modifications. But if you examine the code below, you'll notice that something is causing the unexpected behavior and I just can't seem to pinpoint what it is.
CSS:
html, body {
margin: 0px;
padding: 0;
border: 0;
width: 100%;
height: 100%;
}
.background-image {
left: 0;
top: 0;
z-index: 1;
display: block;
background-image: url(https://www.kasandbox.org/programming-images/landscapes/mountains-in-hawaii.png);
background-size: cover;
width: 100%;
height: 100%;
-webkit-filter: blur(10px);
-moz-filter: blur(10px);
}
... (CSS code continues)
HTML:
<div class="background-image"></div>
<body>
<div class="bodybox">
... (HTML code continues)