Mam problem, staram sie wykonać na swojej stronie obrazek z wysuwającą sie informacją jak na wideo
Kurs CSS odc. 5: Efekty hover, transition, transform - obrazek number 3
Jednak z jakiegoś powodu nie mogę ustawić aby napis był na dole pod zdjęciem - macie pomysły co robię źle? Wiem że żle mam dopasowaną klasę - przykleja sie do głównego diva a nie do diva zdjecia wstawiam wam dany fragment kodu, może ktoś dopatrzy sie mojego błedu pierszy jest HTML a poźniej CSS
<div class="podstrona">
<h2><center> Światła, kamera, akcja! </center></h2>
<p style="text-indent: 3%;">Witaj w części związanej z filmem, w tym miejscu będę starał się publikować matreriały powiązane w jakiś sposób z kinem, aktorami, festiwalami oraz wszystkim co powiązane z filmem i twórczością fimową. </p>
</div>
<div class="content1">
<div class="art1" ><center><a href="#"><img src="jedzenie.png" width="800" height="500"></center>
<div class="contwart">
<a href="#"> <p>Tutaj będa się znajdowały pierwsze słowa artykułów... Więcej informacji Tutaj będa się znajdowały pierwsze słowa artykułów... Więcej informacjiTutaj będa się znajdowały pierwsze słowa artykułów... Więcej informacjiTutaj będa się znajdowały pierwsze słowa artykułów... Więcej informacjiTutaj będa się znajdowały pierwsze słowa artykułów... Więcej informacjiTutaj będa się znajdowały pierwsze słowa artykułów... Więcej informacjiTutaj będa się znajdowały
<strong></br>CZYTAJ DALEJ →</strong> </p></a></div>
</div>
</div>
<div class="content1">
<div class="art1" ><center><a href="#"><img src="jedzenie.png" width="800" height="500"></center>
<div class="contwart">
<a href="#"> <p>Tutaj będa się znajdowały pierwsze słowa artykułów... Więcej informacji Tutaj będa się znajdowały pierwsze słowa artykułów... Więcej informacjiTutaj będa się znajdowały pierwsze słowa artykułów... Więcej informacjiTutaj będa się znajdowały pierwsze słowa artykułów... Więcej informacjiTutaj będa się znajdowały pierwsze słowa artykułów... Więcej informacjiTutaj będa się znajdowały pierwsze słowa artykułów... Więcej informacjiTutaj będa się znajdowały
<strong></br>CZYTAJ DALEJ →</strong> </p></a></div>
</div>
</div>
</div> <!-- koniec content-->
CSS
.content1
{
border: dashed 5px red;
width: 900px;
margin-left: auto;
margin-right: auto;
text-align: justify;
padding-top: 20px;
padding-bottom:10px;
}
.art1
{
border: solid 5px red;
width:800px;
display:block;
margin-left: auto;
margin-right: auto;
}
.contwart
{
position:relative;
display:block;
margin-left: auto;
margin-right: auto;
background-color:green;
border: dashed 5px red;
}
.art1 .contwart
{
position:absolute;
display: block;
width: 800px;
height:auto;
left:0px;
top:833px;
right:0px;
}