When hovering over my image gallery, it works fine. However, I would like the first image in the gallery to automatically appear in the enlarged section instead of displaying as a blank box until hovered over.
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="css.css"/>
<title>Welcome!</title>
</head>
<div id="wrapper">
<body>
<div id="header">
<div id ="logo">
<embed src="Media/Images/logo.svg" type="image/svg+xml" />
</div>
<div id="icons">
<img src="Media/Images/EnvelopeIcon.png" alt="Envelope Icon" height="25" width="30">
<p><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="420f727377757176230231363726272c366c3136232424316c23216c3729">[email protected]</a></p>
<div class="clear">
</div>
<img src="Media/Images/PhoneIcon.png" alt="Envelope Icon" height="25" width="30" />
<p> 07904921417</p>
<div class="clear">
</div>
<img src="Media/Images/HouseIcon.png" alt="Envelope Icon" height="25" width="30">
<p>Stafford, UK</p>
<div class="clear">
</div>
<div class="clear">
</div>
</div>
</div>
<nav>
<div id ="NavBar">
...