如何创建一个 div，它默认显示图片，但当您将鼠标悬停在它上面时会转换为一些文本细节？

Posted 2023-03-06

【中文标题】如何创建一个 div，它默认显示图片，但当您将鼠标悬停在它上面时会转换为一些文本细节？

【英文标题】：How to create a div where it show a picture by default but transitions to some text details when you hover over it?

【发布时间】：2021-04-21 21:12:41

【问题描述】：

我想创建一个 div。 它是 300 x 300 像素。 默认情况下，它有一张图片。 但是，当您将鼠标悬停在它上面时，它会转换为文本描述。 还应该有 0.2 秒的过渡期。

我不知道我们该怎么做。请帮忙。

main, .front, .back 
height:300px;
width:300px;


.back
display:none;


.front:hover .back 
display:block;

<div class="main"> 
  
  <div class="front">
  <img src="https://www.gardeningknowhow.com/wp-content/uploads/2019/04/lawn-pH.jpg"  style="width:100%;height:100%;">
  </div>
  
  <div class="back">
    <h1>Image Name</h1>
    <p>Image description blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah </p>
  </div>
  
</div>

【参考方案1】：

您可以使用此代码

* 
  padding: 0;
  margin: 0;
  box-sizing: border-box;

.main, .front, .back 
  height:300px;
  width:300px;
  position: relative;


.back    
  height: 100%;
  width: 100%;
  position: absolute;
  padding: 6em 1em;
  text-align: center;
  top: -100%;
  right: 0;
  color: #fff;
  background-color: #333333;
  -o-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  -webkit-transition: all 0.5s ease;
  transition: all 0.5s ease;
 

.main:hover .back 
    display: block;
    top: 0%;

<div class="main"> 
  
  <div class="front">
  <img src="https://www.gardeningknowhow.com/wp-content/uploads/2019/04/lawn-pH.jpg"  style="width:100%;height:100%;">
  </div>
  <div class="back">
    <h1>Image Name</h1>
    <p>Image description blah blah blah blah blah blah blah blah blah  </p>
  </div>
  
</div>

【讨论】：

我从中得到的问题是，当区域没有悬停时，“back”类中的内容是不可见的。它在它上面。

【参考方案2】：

.front,
.back 
  height: 300px;
  width: 300px;
  transition: 0.2s;


.back 
  transform: translateY(-80%);
  opacity: 0;


.front:hover .back 
  opacity: 100;

<div class="front">
  <img src="https://www.gardeningknowhow.com/wp-content/uploads/2019/04/lawn-pH.jpg"  style="width:100%;height:100%;">
  <div class="back">
    <h1>Image Name</h1>
    <p>Image description </p>
  </div>
</div>

这行得通！

如果你想隐藏图像然后：

.front,
.back 
  height: 300px;
  width: 300px;
  transition: 0.2s;


#image 
  transition: 0.2s;


.back 
  transform: translateY(-80%);
  opacity: 0;


.front:hover .back 
  opacity: 100;


.front:hover #image 
  opacity: 0;

<div class="front">
  <img id="image" src="https://www.gardeningknowhow.com/wp-content/uploads/2019/04/lawn-pH.jpg"  style="width:100%;height:100%;">
  <div class="back">
    <h1>Image Name</h1>
    <p>Image description </p>
  </div>
</div>