Personal project

HTML-CSS
1

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

4

Thanks a bunch for the pointers and thank you for taking your time to help me with my page, I really appreciate it. The transition property adds a nice feel to the feature I want to add as well so thanks again for that, I looked at the example you provided and it still does the thing that I am trying to remove. When the image that my mouse is hovering over is enlarged it creates a gap between the other images and the border of the background box. I’m not certain if this is inherent in the code I’m writing and want to know if there is a means to make it so that the other images don’t move and cause that small gap. As well I’m curious if you think it matters at this stage in my coding learning. Thanks a bunch again. I greatly appreciate it.
p.s. Not entirely sure what bootstrap is and what it does for my project, if you got the time and an explanation would be appreciated