Hey, everyone! I’m creating a website for my HTML & CSS class from scratch and I have an ingredients list section and I want to make it to where when you hover over the icon I set next to each ingredient, that it activates a picture of that ingredient to the right. I’ve tried many methods, and I’m not having much luck. Here’s my code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Cornucopia Online</title>
<link href="index_reset.css" rel="stylesheet" />
<link href="index_styles.css" rel="stylesheet" />
<link href="recipes_styles.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
</head>
<body>
<nav id="TopNavBar">
<li><a href="#">Contact Us</a></li>
<li><a href="#">My Account</a></li>
</nav>
<img src="cornlogo.png" alt="Cornucopia Online">
<header>
<nav id="NavBar">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="#">Products</a></li>
<li><a href="recipes.html">Recipes</a></li>
<li><a href="#">Newsletter</a></li>
<li><a href="#">FAQs</a></li>
<li><a href="#">Support</a></li>
</ul>
</nav>
</header>
<section>
<h1>Grilled Turkey</h1>
<p>Take your turkey outside this year and let your grill do the cooking.
Grilled turkey is deliciously crisp with a tangy smoked flavor. Properly
treated, turkey on the grill doesn't take any longer than turkey cooked
in an oven.</p>
</section>
<aside>
<h2>Ingredients</h2>
<ul>
<li><img src="Turkey.png" alt="Turkey icon" width="25px"
height="25px">1 turkey, 12 to 14 lbs.</li>
<li><img src="GarlicClove.png" alt="Garlic clove icon" width="25px"
height="25px">8-10 garlic cloves</li>
<li><img src="Parsley.png" alt="Parsley icon" width="25px"
height="25px">2 cups lightly packed Italian parsley leaves</li>
<li><img src="Salt.png" alt="salt icon" width="25px"
height="25px">1 Tbsp. kosher salt</li>
<li><img src="BlackPepper.png" alt="Black pepper icon" width="25px"
height="25px">2 tsp. freshly ground black pepper</li>
<li><img src="ChiliPowder.png" alt="Chili icon" width="25px"
height="25px">2 tsp. chili powder</li>
<li><img src="Orange.png" alt="Orange icon" width="25px"
height="25px">2 oranges</li>
<li><img src="Butter.png" alt="Butter icon" width="25px"
height="25px">1 stick unsalted butter</li>
<li><img src="Broth.png" alt="Broth icon" width="25px"
height="25px">2-4 cups reduced-sodium chicken stock</li>
<li><img src="Onion.png" alt="Onion icon" width="25px"
height="25px">1 large onion</li>
<li><img src="Carrot.png" alt="Carrot icon" width="25px"
height="25px">1 large carrot</li>
<ul>
</aside>
</body>
<footer>
Cornucopia Online | 781 Bridge Street Bristol, CT 06010 | <a href="tel:8005551088">(800) 555 - 1088</a> |
<a href="cornucopiaonline@example.org">cornucopiaonline@example.org</a>
</footer>
</html>
It’s the h2 elements. I want to be able to learn this so any suggestions would help a lot! Thanks.