Personal project

Personal project
0

#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


#2

I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make easier to read.

See this post to find the backtick on your keyboard. The “preformatted text” tool in the editor (</>) will also add backticks around text.

Note: Backticks are not single quotes.

First of all, your h1 element should be nested in the body element and not above it.

If you are going to use the style attribute, then you need to surround it’s value with either double quotes or single quotes. Since you are already using CSS, why not move all of your styling withing the style element? Also, you need to add the transition property to your h2 class. Below I have added the transition property and put the width and height in the h2 class.

.h2 {
	width:300px;
	height:200px;
	transition: .3s;
}

#3

If you add Bootstrap 4 to your project and fix the issues I pointed out and add the transition property to your h2 class, then you could have something which works like the following fiddle.

http://jsfiddle.net/t0y6q8aw/

I did not have access to your background image or the other images, so I pulled some random images in.


#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