1
Я все еще изучаю CSS и у меня запутанная проблема, связанная с тем, что заголовок слайда появляется внутри другого элемента div. Когда у меня есть заголовок с надписью сам по себе, не редактируя свойства изображения позади него, он работает отлично, но когда я редактирую его на своей веб-странице, чтобы он лучше подходил под заголовки, все всплывающие в нижней части фона div ,слайд в заголовке, появляющемся в неправильном div
THIS это то, что фигура делает сама по себе или когда я ее не редактирую, но если вы посмотрите на код ниже, что-то вызывает это всплывающее окно в другом div, и я не могу понять, что это.
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);
-o-filter: blur(10px);
-ms-filter: blur(10px);
filter: blur(10px);
}
.bodybox {
background-color: rgba(245, 245, 245, 0.6);
position:fixed;
padding:0;
margin:0;
border: 0;
top:0;
left:0;
width: 100%;
height: 100%;
z-index:2;
overflow: scroll;
}
.heading {
background-color: rgba(0,0,0,.75);
width: 100%;
height: 10%;
color: rgb(255,255,255);
text-align: right;
margin: 0;
border: 0;
padding: 0;
z-index: 2;
display: table;
vertical-align: center;
}
.travel_menu {
background-color: rgba(124,175,192,0.75);
color: rgb(255, 255, 255);
padding: 0;
height: 200px;
width: 100%;
max-width: 100%;
z-index: 2;
text-align: left;
vertical-align: center;
display: inline-flex;
}
.
figure {
z-index: 3;
display: block;
position: relative;
float: left;
overflow: hidden;
margin: 0 20px 20px 0;
}
figcaption {
position: absolute;
background: black;
background: rgba(0,0,0,0.75);
color: white;
padding: 10px 20px;
opacity: 0;
font-size: 15px;
-webkit-transition: all 0.6s ease;
-moz-transition: all 0.6s ease;
-o-transition: all 0.6s ease;
}
figure:hover figcaption {
opacity: 1;
}
figure:before {
content: "?";
position: absolute;
font-weight: 800;
background: black;
background: rgba(255,255,255,0.75);
text-shadow: 0 0 5px white;
color: black;
width: 24px;
height: 24px;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
text-align: center;
font-size: 14px;
line-height: 24px;
-moz-transition: all 0.6s ease;
opacity: 0.75;
}
figure:hover:before {
opacity: 0;
}
.cap-bot:before { bottom: 10px; left: 10px; }
.cap-bot figcaption { left: 0; bottom: -30%;}
.cap-bot:hover figcaption { bottom: 0; }
.container {
width: 300px;
height: 180px;
}
.container img {
width: 100%;
height: auto;
}
h2{
padding-top: 0;
margin-top: 0;
}
h1{
padding-top: 0;
margin-top: 0;
line-height: 10px;
padding: 10px 0;
display:table-cell;
vertical-align: bottom;
}
HTML:
<div class="background-image"></div>
<body>
<div class="bodybox">
<div class="heading"><h1>Travel to ....</h1></div>
<div class="travel_menu">
<div class="container">
<figure class="cap-bot">
<img src="https://www.kasandbox.org/programming-images/landscapes/fields-of-grain.png" alt="rolling hills of grain.">
<figcaption>
Three weeks from now, I will be harvesting my crops. Imagine where you will be, and it will be so. Hold the line! Stay with me! If you find yourself alone, riding in the green fields with the sun on your face, do not be troubled. For you are in Elysium, and you're already dead!
</figcaption>
</figure>
</div>
<div class="container">
<figure class="cap-bot">
<img src="https://www.kasandbox.org/programming-images/landscapes/fields-of-grain.png" alt="rolling hills of grain.">
<figcaption>
Three weeks from now, I will be harvesting my crops. Imagine where you will be, and it will be so. Hold the line! Stay with me! If you find yourself alone, riding in the green fields with the sun on your face, do not be troubled. For you are in Elysium, and you're already dead!
</figcaption>
</figure>
</div>
<div class="container">
<figure class="cap-bot">
<img src="https://www.kasandbox.org/programming-images/landscapes/fields-of-grain.png" alt="rolling hills of grain.">
<figcaption>
Three weeks from now, I will be harvesting my crops. Imagine where you will be, and it will be so. Hold the line! Stay with me! If you find yourself alone, riding in the green fields with the sun on your face, do not be troubled. For you are in Elysium, and you're already dead!
</figcaption>
</figure>
</div>
</div>
</div>
</body>
Я понятия не имею, как эта маленькая опечатка удалось это сделать, но это, кажется, решить эту проблему. Хорошо поймал! Спасибо за помощь! – Alex