Search code examples
htmlcsscss-grid

Css grid hover out of area

Hey guys I'm having a bit of trouble here. When i hover over my images they go out of the area and moves the web page. I was trying to do something more along the lines of this website

Can anyone help with what I'm trying to accomplish and any other tips will be greatly appreciated

My website

language: lang-css

*{
     margin: 0px;
    padding: 0px;
}

a{
    text-decoration: none;
    font-family: 'Jura', sans-serif;
    font-weight: 100;
    color: black;
}

h1, h2{
    font-family: 'Chilanka', cursive;
}

.firstContainer{
    display: grid;
    grid-template-columns: 20fr 20fr;
    grid-gap: 20px;
}



.Nav{
    grid-area: end;
    text-decoration: none;
    margin-right: 100px;
    margin-top: 40px;
    font-size: 20px;
    word-spacing: 20px;
}

.head{
    display: grid;
    margin-top: 30px;
    position: absolute;
    margin-left: 100px;
}

.firstHeader{
    font-weight: 100;
}

.secHeader{
    margin-left: 100px;
    padding: 10px;
    font-weight: 200;
}

.container{
    display: grid;
    margin-top: 80px;
    justify-content: center;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(4, 20vw);
    max-width: 1270px;
}


  .galleryBox img{
    max-width: 100%;
    width:  100%;
    height: 100%;
  }

  .Imgs{
      background-position: center;
      background-size: 100%;
      transition: 2s;
  }

  img {
    transition: transform .25s ease;
}

  .Imgs:hover {
    transform: scale(1.2);
    background-position: center;
    z-index: 16px;
    left: 0;
    width: 100%;
    height: 100%;
    max-width: 400px;
    overflow: hidden;
  }

language: lang-html 

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="styles.css">
    <link href="https://fonts.googleapis.com/css?family=Changa:200&display=swap" rel="stylesheet">
    <title>FirstFloorVisuals</title>
</head>
<body>
    <div class="head">
    <div class="header">
        <h1 class="firstHeader">FirstFloor.Visuals</h1>
        <h2 class="secHeader">Creativty | Design | Visions</h2>
        </div>
    </div>
    <div class="firstContainer">
    <div class="Nav">
        <a href=" ">Portfolio</a>
        <a href=" ">About</a>
        <a href=" ">Contact</a>
    </div>
    </div>

    <div class="container">
            <div class="galleryBox">
              <img src="https://images.unsplash.com/photo-1557296869-e9a76501a0d1?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" class="Imgs" alt="Image 1">
            </div>
            <div class="galleryBox">
              <img src="https://images.unsplash.com/photo-1557296869-e9a76501a0d1?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" class="Imgs" alt="Image 2">
            </div>
            <div class="galleryBox">
              <img src="https://images.unsplash.com/photo-1557296869-e9a76501a0d1?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" class="Imgs" alt="Image 3">
            </div>
            <div class="galleryBox">
              <img src="https://images.unsplash.com/photo-1557296869-e9a76501a0d1?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" class="Imgs" alt="Image 4">
            </div>
            <div class="galleryBox">
              <img src="https://images.unsplash.com/photo-1557296869-e9a76501a0d1?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" class="Imgs" alt="Image 5">
            </div>
            <div class="galleryBox">
              <img src="https://images.unsplash.com/photo-1557296869-e9a76501a0d1?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60"  class="Imgs" alt="Image 6">
            </div>
            <div class="galleryBox">
              <img src="https://images.unsplash.com/photo-1557296869-e9a76501a0d1?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" class="Imgs"  alt="Image 6">
            </div>
            <div class="galleryBox">
              <img src="https://images.unsplash.com/photo-1557296869-e9a76501a0d1?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60"  class="Imgs" alt="Image 6">
            </div>
            <div class="galleryBox">
              <img src="https://images.unsplash.com/photo-1557296869-e9a76501a0d1?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60"  class="Imgs" alt="Image 6">
            </div>
            <div class="galleryBox">
              <img src="https://images.unsplash.com/photo-1557296869-e9a76501a0d1?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" class="Imgs" alt="Image 6">
            </div>
            <div class="galleryBox">
              <img src="https://images.unsplash.com/photo-1557296869-e9a76501a0d1?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" class="Imgs" alt="Image 6">
            </div>
            <div class="galleryBox">
              <img src="phttps://images.unsplash.com/photo-1557296869-e9a76501a0d1?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" class="Imgs" alt="Image 6">
            </div>
            <div class="galleryBox">
              <img src="https://images.unsplash.com/photo-1557296869-e9a76501a0d1?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" class="Imgs" alt="Image 6">
            </div>
            <div class="galleryBox">
              <img src="https://images.unsplash.com/photo-1557296869-e9a76501a0d1?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" class="Imgs" alt="Image 6">
            </div>
            <div class="galleryBox">
              <img src="https://images.unsplash.com/photo-1557296869-e9a76501a0d1?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" class="Imgs" alt="Image 6">
            </div>
            <div class="galleryBox">
              <img src="https://images.unsplash.com/photo-1557296869-e9a76501a0d1?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" class="Imgs" alt="Image 6">
            </div>
          </div>
</body>
</html>
Solution

  • first of all background-position: center; and background-size: 100%; this both properties are not works with <img>. these are the properties which used to set the background image not feature image. so I have remove that from my code given below.

    now if you want full-width container then set it's width to 100%.

    then set overflow:hidden to galleryBox(parent box of single image).

    for more understanding please review the following snippet.

    *{
    margin: 0px;
    padding: 0px;
}
.container{
    display: grid;
    margin-top: 80px;
    justify-content: center;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(4, 20vw);
    max-width: 100%;
}
.galleryBox {
    overflow: hidden;
}
.galleryBox img {
    max-width: 100%;
    width: 100%;
    height: 100%;
    transition: all 2s;
}
.galleryBox img:hover {
    transform: scale(1.2);
}
    <body>
	<div class="container">
		<div class="galleryBox">
			<img src="https://images.unsplash.com/photo-1557296869-e9a76501a0d1?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60">
		</div>
		<div class="galleryBox">
			<img src="https://images.unsplash.com/photo-1557296869-e9a76501a0d1?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60">
		</div>
		<div class="galleryBox">
			<img src="https://images.unsplash.com/photo-1557296869-e9a76501a0d1?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60">
		</div>
		<div class="galleryBox">
			<img src="https://images.unsplash.com/photo-1557296869-e9a76501a0d1?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60">
		</div>
		<div class="galleryBox">
			<img src="https://images.unsplash.com/photo-1557296869-e9a76501a0d1?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60">
		</div>
		<div class="galleryBox">
			<img src="https://images.unsplash.com/photo-1557296869-e9a76501a0d1?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60">
		</div>
		<div class="galleryBox">
			<img src="https://images.unsplash.com/photo-1557296869-e9a76501a0d1?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60">
		</div>
		<div class="galleryBox">
			<img src="https://images.unsplash.com/photo-1557296869-e9a76501a0d1?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60">
		</div>
		<div class="galleryBox">
			<img src="https://images.unsplash.com/photo-1557296869-e9a76501a0d1?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60">
		</div>
		<div class="galleryBox">
			<img src="https://images.unsplash.com/photo-1557296869-e9a76501a0d1?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60">
		</div>
		<div class="galleryBox">
			<img src="https://images.unsplash.com/photo-1557296869-e9a76501a0d1?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60">
		</div>
		<div class="galleryBox">
			<img src="https://images.unsplash.com/photo-1557296869-e9a76501a0d1?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60">
		</div>
		<div class="galleryBox">
			<img src="https://images.unsplash.com/photo-1557296869-e9a76501a0d1?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60">
		</div>
		<div class="galleryBox">
			<img src="https://images.unsplash.com/photo-1557296869-e9a76501a0d1?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60">
		</div>
		<div class="galleryBox">
			<img src="https://images.unsplash.com/photo-1557296869-e9a76501a0d1?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60">
		</div>
		<div class="galleryBox">
			<img src="https://images.unsplash.com/photo-1557296869-e9a76501a0d1?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60">
		</div>
		<div class="galleryBox">
			<img src="https://images.unsplash.com/photo-1557296869-e9a76501a0d1?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60">
		</div>
		<div class="galleryBox">
			<img src="https://images.unsplash.com/photo-1557296869-e9a76501a0d1?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60">
		</div>
		<div class="galleryBox">
			<img src="https://images.unsplash.com/photo-1557296869-e9a76501a0d1?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60">
		</div>
		<div class="galleryBox">
			<img src="https://images.unsplash.com/photo-1557296869-e9a76501a0d1?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60">
		</div>
		<div class="galleryBox">
			<img src="https://images.unsplash.com/photo-1557296869-e9a76501a0d1?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60">
		</div>
		<div class="galleryBox">
			<img src="https://images.unsplash.com/photo-1557296869-e9a76501a0d1?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60">
		</div>
		<div class="galleryBox">
			<img src="https://images.unsplash.com/photo-1557296869-e9a76501a0d1?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60">
		</div>
		<div class="galleryBox">
			<img src="https://images.unsplash.com/photo-1557296869-e9a76501a0d1?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60">
		</div>
		<div class="galleryBox">
			<img src="https://images.unsplash.com/photo-1557296869-e9a76501a0d1?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60">
		</div>
	</div>
</body>

    I hope this code is useful to you and help you to solve your problem.

    Thank you...