I am new to HTML and struggling to create a grid with images where the text appears over the image. I have tried multiple methods but nothing seems to work. I am making progress in my studies, but this time I need some help. Here is the code snippet:
<!DOCTYPE html>
<html>
<head>
<style>
div.img {
margin: 5px;
border: 1px solid #ccc;
float: left;
width: 180px;
position:relative;
}
div.img:hover {
border: px solid #777;
}
div.img img {
width: 100%;
height: auto;
}
#NomeAnime {
position:relative;
width:98%;
left:2px;
top:-20%;
color: white;
font: bold 13px arial, sans-serif;
text-align: center;
height: 16px;
overflow: hidden;
background-color:green;
}
</style>
</head>
<body>
<div class="img">
<img src="http://iv1.lisimg.com/image/7814282/600full-asa-butterfield.jpg" alt="Trolltunga Norway" width="300" height="200">
<div id="NomeAnime">teste</div></div>
</div>
<div class="img">
<img src="http://iv1.lisimg.com/image/7814282/600full-asa-butterfield.jpg" alt="Forest" width="600" height="400">
<div id="NomeAnime">teste</div></div>
<div class="img">
<img src="http://iv1.lisimg.com/image/7814282/600full-asa-butterfield.jpg" alt="Northern Lights" width="600" height="400">
<div id="NomeAnime">teste</div></div>
</div>
<div class="img">
<img src="http://iv1.lisimg.com/image/7814282/600full-asa-butterfield.jpg" alt="Mountains" width="600" height="400">
<div id="NomeAnime">teste</div></div>
</div>
</body>
</html>