I’m working through the challenges and am trying to work on a personal project so I can understand the challenges and different lessons thoroughly. I am working on a page about apples (for shits and giggles)
and was creating an image gallery where when the mouse hovers over the image it transforms in scale and gives is a red border. What I want to know is how to make it so that the other images don’t move and only the particular one the mouse is hovering over is affected. Also I’m not certain how to change it so that the images are in the center of the green box I created.
<!DOCTYPE html>
<html>
<style>
h1 {
text-align: center;}
body {
background-image: url("applegallery/background.jpg");}
h5 {
display: inline;
margin: 1em;
font-size: 25px;}
.Gallery {
border: 10px solid black;
background-color: green;
}
.h2:hover {
border-color: red;
border-width: 5px;
border-style: solid;
transform:scale(1.1);}
</style>
<title>Images</title>
<h1>Take a gander at our apple gallery!</h1>
<body>
<div style= text-align:center;>
<h5><a href="Home.html">Home</a></h5>
<h5><a href="History.html">History</a></h5>
</div>
<main>
<div class="Gallery">
<img src="applegallery/background.jpg" class="h2" style="width:300;height:200px;">
<img src="applehkitty.gif_c200" class="h2" style="width:300px; height:200px">
<img src="apple.jpeg" class="h2" style="width:300px;height:200px;">
<img src="applegallery/apple1.jpg" class="h2" style="width:300px; height:200px;">
<img src="applegallery/apple2.jpg" class="h2" style="width:300px; height:200px;">
<img src="applegallery/greenapple1.jpg" class="h2" style="width:300px; height:200px;">
<img src="applegallery/greenapple2.jpg" class="h2" style="width:300px; height:200px;">
<img src="applegallery/dopegreenapple3.jpg" class="h2" style="width300px;height:200px;">
</div>
</main>
</body>
</html>
this is the code i have for the page so far