当我将鼠标悬停在css中的图像上时出现文字

问题描述 投票：0回答：2

当我将鼠标悬停在每个图像上时，我试图使段落文本显示出来。文本应位于图像的中心。我不确定如何实现此目标。

[我的另一个问题是，如果我将top设置为：0，然后删除该变换，则文本实际上并没有位于top：0处，在文本顶部和文本位置之间有一定的边距。

下面的Codepen：

https://codepen.io/uhzyrneh/pen/WNvOaWB

* {
  padding: 0;
  margin: 0;
}

.container {
  display: grid;
  grid-template-columns: repeat(4, 25%);
  background-color: black;
}

.container div {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.container div img {
  width: 100%;
  transition: 0.4s;
  transform: scale(1.1);
  opacity: 0.7;
}

.container div img:hover {
  transform: scale(1.03);
  opacity: 1;
}

.container div p {
  color: white;
  position: absolute;
  top: 0;
  left: 50%;
  font-size: 50px;
  opacity: 1;
}
<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
  <div class="container">
    <div class="">
      <img id="pic1" src="https://images.unsplash.com/photo-1498837167922-ddd27525d352?ixlib=rb-1.2.1&w=1000&q=80">
      <p>Test</p>
    </div>
    <div class="">
      <img id="pic2" src="https://media.gettyimages.com/photos/different-types-of-food-on-rustic-wooden-table-picture-id861188910?s=612x612">
      <p>Test2</p>
    </div>
    <div class="">
      <img id="pic3" src="https://images.unsplash.com/photo-1498837167922-ddd27525d352?ixlib=rb-1.2.1&w=1000&q=80">
    </div>
    <div class="">
      <img id="pic4" src="https://media.gettyimages.com/photos/different-types-of-food-on-rustic-wooden-table-picture-id861188910?s=612x612">
    </div>
    <div class="">
          <img id="pic5" src="https://images.unsplash.com/photo-1498837167922-ddd27525d352?ixlib=rb-1.2.1&w=1000&q=80">
    </div>
    <div class="">
      <img id="pic6" src="https://media.gettyimages.com/photos/different-types-of-food-on-rustic-wooden-table-picture-id861188910?s=612x612">
    </div>
    <div class="">
      <img id="pic7" src="https://images.unsplash.com/photo-1498837167922-ddd27525d352?ixlib=rb-1.2.1&w=1000&q=80">
    </div>
    <div class="">
      <img id="pic8" src="https://media.gettyimages.com/photos/different-types-of-food-on-rustic-wooden-table-picture-id861188910?s=612x612">
    </div>
  </div>
</body>

</html>
html css css-grid
2个回答
2
投票

您正在寻找的规则是：

.container div:hover p {
  display: inline;
}

并通过将display: none;添加到.container div p来隐藏文本开头。

此外，文本位于div的顶部。如果突出显示它，则可以看到它紧靠顶部。

* {
  padding: 0;
  margin: 0;
}

.container {
  display: grid;
  grid-template-columns: repeat(4, 25%);
  background-color: black;
}

.container div {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.container div img {
  width: 100%;
  transition: 0.4s;
  transform: scale(1.1);
  opacity: 0.7;
}

.container div img:hover {
  transform: scale(1.03);
  opacity: 1;
}

.container div p {
  color: white;
  position: absolute;
  top: 0;
  left: 50%;
  font-size: 50px;
  opacity: 1;
  display: none;
}
.container div:hover p {
  display: inline;
}
<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
  <div class="container">
    <div class="">
      <img id="pic1" src="https://images.unsplash.com/photo-1498837167922-ddd27525d352?ixlib=rb-1.2.1&w=1000&q=80">
      <p>Test</p>
    </div>
    <div class="">
      <img id="pic2" src="https://media.gettyimages.com/photos/different-types-of-food-on-rustic-wooden-table-picture-id861188910?s=612x612">
      <p>Test2</p>
    </div>
    <div class="">
      <img id="pic3" src="https://images.unsplash.com/photo-1498837167922-ddd27525d352?ixlib=rb-1.2.1&w=1000&q=80">
    </div>
    <div class="">
      <img id="pic4" src="https://media.gettyimages.com/photos/different-types-of-food-on-rustic-wooden-table-picture-id861188910?s=612x612">
    </div>
    <div class="">
          <img id="pic5" src="https://images.unsplash.com/photo-1498837167922-ddd27525d352?ixlib=rb-1.2.1&w=1000&q=80">
    </div>
    <div class="">
      <img id="pic6" src="https://media.gettyimages.com/photos/different-types-of-food-on-rustic-wooden-table-picture-id861188910?s=612x612">
    </div>
    <div class="">
      <img id="pic7" src="https://images.unsplash.com/photo-1498837167922-ddd27525d352?ixlib=rb-1.2.1&w=1000&q=80">
    </div>
    <div class="">
      <img id="pic8" src="https://media.gettyimages.com/photos/different-types-of-food-on-rustic-wooden-table-picture-id861188910?s=612x612">
    </div>
  </div>
</body>

</html>
0
投票

您可以这样使用：

* {
  padding: 0;
  margin: 0;
}

.container {
  display: grid;
  grid-template-columns: repeat(4, 25%);
  background-color: black;
}

.container div {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.container div img {
  width: 100%;
  transition: 0.4s;
  transform: scale(1.1);
  opacity: 0.7;
}

.container div img:hover {
  transform: scale(1.03);
  opacity: 1;
}

.container div p {
  color: #fff;
  position: absolute;
  top: 0;
  left: 50%;
  font-size: 50px;
  opacity: 1;
}
.container div a:hover::after{
  content: attr(title);
  display:block;
  position:absolute;
  width:100%;
  height:200px;
  top:50px;
  left:0;
  z-index:1;
  opacity: 1;
  font-size: 50px;
  color:#fff;
  text-align:center;
}
<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
  <div class="container">
    <div class="">
      <a href="#" title="Img Title 1"><img id="pic1" src="https://images.unsplash.com/photo-1498837167922-ddd27525d352?ixlib=rb-1.2.1&w=1000&q=80"></a>
    </div>
    <div class="">
      <a href="#" title="Img Title 2"><img id="pic2" src="https://media.gettyimages.com/photos/different-types-of-food-on-rustic-wooden-table-picture-id861188910?s=612x612"></a>
    </div>
    <div class="">
      <a href="#" title="Img Title 3"><img id="pic3" src="https://images.unsplash.com/photo-1498837167922-ddd27525d352?ixlib=rb-1.2.1&w=1000&q=80"></a>
    </div>
    <div class="">
      <a href="#" title="Img Title 4"><img id="pic4" src="https://media.gettyimages.com/photos/different-types-of-food-on-rustic-wooden-table-picture-id861188910?s=612x612"></a>
    </div>
    <div class="">
          <a href="#" title="Img Title 5"><img id="pic5" src="https://images.unsplash.com/photo-1498837167922-ddd27525d352?ixlib=rb-1.2.1&w=1000&q=80"></a>
    </div>
    <div class="">
      <a href="#" title="Img Title 6"><img id="pic6" src="https://media.gettyimages.com/photos/different-types-of-food-on-rustic-wooden-table-picture-id861188910?s=612x612"></a>
    </div>
    <div class="">
      <a href="#" title="Img Title 7"><img id="pic7" src="https://images.unsplash.com/photo-1498837167922-ddd27525d352?ixlib=rb-1.2.1&w=1000&q=80"></a>
    </div>
    <div class="">
      <a href="#" title="Img Title 8"><img id="pic8" src="https://media.gettyimages.com/photos/different-types-of-food-on-rustic-wooden-table-picture-id861188910?s=612x612"></a>
    </div>
  </div>
</body>

</html>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.