html - CSS网格悬停在区域之外

标签 html css css-grid

嘿伙计们，我在这里遇到了一些麻烦。当我将鼠标悬停在图像上时，它们会离开该区域并移动网页。我试图做更多类似 this website 的事情

任何人都可以帮助我完成我想要完成的任务，并且任何其他提示将不胜感激

My website

语言: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;
  }

语言: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>

最佳答案

首先background-position: center;和background-size: 100%;这两个属性不适用于 <img> 。这些是用于设置背景图像而不是特征图像的属性。所以我已经从下面给出的代码中删除了它。

现在，如果您想要全 Angular 容器，请将其宽度设置为 100%。

然后设置overflow:hidden至galleryBox (单个图像的父框)。

为了获得更多理解，请查看以下代码片段。

*{
    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>

我希望这段代码对您有用并帮助您解决问题。

谢谢...

关于html - CSS网格悬停在区域之外，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59588143/

上一篇：vb.net - 在 "method/event/enum dropdown browser"中禁用分类

下一篇：angularjs - 如何在Firebase托管中使用自定义域名电子邮件

相关文章：

html - 响应式 Bootstrap 导航菜单

css - 为某些元素溢出/扩展 CSS 网格区域

html - 取决于元素数量的动态网格高度

html - 减少 CSS 网格 UL/LI 中的间隙

jquery - 用另一个 Div 替换 Div

javascript - MUI 断点无法识别 "theme.breakpoints.down"

html - 为什么网页不能平滑滚动？

html - 选择元素的 CSS 样式不适用于 IE 7

css - CSS float属性在处理嵌套div时如何组合？

javascript - jQuery 多个 CSS 冲突

©2024 IT工具网  联系我们