Please fix and improve my HTML and CSS code: First picture is my WRONG output. Second picture is the EXPECTED output. Just use random pictures for photo1. photo2, photo3, photo4, photo1thumb, photo2thumb, photo3thumb, photo4thumb for testing. index.html Image Gallery Image Gallery Golden Gate Bridge California Beach Waves Crashing Pacific Sunset
Please fix and improve my HTML and CSS code:
First picture is my WRONG output.
Second picture is the EXPECTED output.
Just use random pictures for photo1. photo2, photo3, photo4, photo1thumb, photo2thumb, photo3thumb, photo4thumb for testing.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Image Gallery</title>
<meta charset="utf-8">
<style>
#gallery { position: relative; }
#gallery ul { width: 250px; list-style-type: none; }
#gallery li { display: inline; float: left; padding: 10px
#gallery img { border-style: none; }
#gallery a { text-decoration: none; color: #333;
font-style: italic; }
#gallery span { display: none; }
#gallery a:hover span {
display: block;
position: absolute;
top: 10px; left: 300px;
text-align: center; }
</style>
</head>
<body>
<h1>Image Gallery</h1>
<div id = "gallery">
<ul>
<li><a href="photo1.jpg"><img src="photo1thumb.jpg" width="100" <span>
<img src="photo1.jpg" width="250" height="150">Golden Gate Bridge
</li>
<li><a href="photo2.jpg"><img src="photo2thumb.jpg" width="100"<span>
<img src="photo2.jpg" width="250" height="150">California Beach</li>
<li><a href="photo3.jpg"><img src="photo3thumb.jpg" width="100"<span>
<img src="photo3.jpg" width="250" height="150">Waves Crashing</li>
<li><a href="photo4.jpg"><img src="photo4thumb.jpg" width="100"<span>
<img src="photo4.jpg" width="250" height="150">Pacific Sunset</li>
</ul>
</div>
</body>
</html>
Step by step
Solved in 3 steps with 2 images
