4.9.4 Caption on Demand
- Due Nov 14, 2024 by 11:59pm
- Points 5
- Submitting a text entry box or a file upload
This webpage showcases four different animals. Each animal has a picture and a caption stating a few facts about the animal. Each picture/caption combination has been grouped into a gallery-item.
Fill in the CSS rules using the visibility attribute to create a page that allows the user to hover over the gallery item (as shown by the dashed border) to see the caption.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Aquatic Animals</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="header">
Gallery of Aquatic Animals
</div>
<div class="content">
<div class="gallery-item" id="whale">
<img alt="whale" src="http://www.publicdomainpictures.net/pictures/220000/t2/orca-1494255090v7x.jpg">
<div class="caption" id="whale-cap">
Whales are some of the largest living animals. They
live in the ocean, having fully adapted to living
in the water. They are mammals!
</div>
</div>
<div class="gallery-item" id="shark">
<img alt="shark" src="http://www.publicdomainpictures.net/pictures/160000/t2/shark-at-ushaka-marine-world-2.jpg">
<div class="caption" id="shark-cap">
Sharks are known for being apex predators, but some
sharks only eat small fish. Sharks teeth never stop
growing, with old ones constantly falling out and
being replaced by new teeth.
</div>
</div>
<div class="gallery-item" id="dolphin">
<img alt="dolphin" src="http://www.publicdomainpictures.net/pictures/220000/t2/dolphin-1494900521etC.jpg">
<div class="caption" id="dolphin-cap">
Dolphins are highly intelligent animals, demonstrated by their
curiosity and complex social structure. Although they
live in the ocean, they breathe air. Lucky for them, they
can hold their breath for up to 15 minutes.
</div>
</div>
<div class="gallery-item" id="octopus">
<img alt="octopus" src="http://www.publicdomainpictures.net/pictures/90000/t2/octpus-statue-for-kids.jpg">
<div class="caption" id="octopus-cap">
Octopuses are also very intelligent animals. There are several
cases of octopuses escaping from aquariums. They are able
to change the color and even the texture of their skin at will!
</div>
</div>
</div>
</body>
</html>
CSS
/* Add the visibility attribute to these rules so that the caption shows up when
the user hovers over the gallery item */
#whale:hover .caption{
}
#dolphin:hover .caption{
}
#shark:hover .caption{
}
#octopus:hover .caption{
}
/* Other styles */
img{
height:250px;
width:250px;
}
.content{
margin-left:25%;
}
.gallery-item{
border:2px dashed black;
width:300px;
margin:25px;
padding:10px;
}
.caption{
visibility:hidden;
}
body{
font-family:Helvetica;
font-size: 16px;
background-color:AliceBlue;
}
.header{
font-family:cursive;
font-size:32px;
text-align:center;
}
Find Rubric
