悬停图片显示其下方的文字

Question

我正在尝试制作一个页面并在其中制作，当图片悬停在上面时，它会像卡片一样显示，文字会出现在它下面，但我不确定如何制作文字部分发生这就是我现在所拥有的（我是初学者）

            <img src="pics/ii.jpg" class="crd_1">
            <p class="crd1">hskgnskg<br>kdjfehbdbdgdf<br>jdbhfkdf</p>
            <img src="pics/vi.jpg" class="crd_2">
            <img src="pics/iii.jpg" class="crd_3">
            <img src="pics/v.jpg" class="crd_4">

这是HTML部分。

.crd_1{
    width: 220px;
    height: 240px;
    padding-bottom: 50px;
    padding-top: 6px;
    padding-left: 6px;
    padding-right: 6px;
    background-color: red;
    margin-top: 390px;
    margin-left:250px;
    cursor: pointer;
    position: absolute;
    transition: .3s ease-in-out;
 }

 .crd_2{
    width: 220px;
    height: 240px;
    padding-bottom: 50px;
    padding-top: 6px;
    padding-left: 6px;
    padding-right: 6px;
    background-color: red;
    margin-top: 390px;
    margin-left:510px;
    background-color: red;
    cursor: pointer;
    word-spacing: 50px;
    position: absolute;
    transition: .3s ease-in-out;
}

.crd_3{
    width: 220px;
    height: 240px;
    padding-bottom: 50px;
    padding-top: 6px;
    padding-left: 6px;
    padding-right: 6px;
    background-color: red;
    margin-top: 390px;
    margin-left:770px;
    background-color: red;
    cursor: pointer;
    position: absolute;
    transition: .3s ease-in-out;
}

.crd_4{
    width: 220px;
    height: 240px;
    padding-bottom: 50px;
    padding-top: 6px;
    padding-left: 6px;
    padding-right: 6px;
    background-color: red;
    margin-top: 390px;
    margin-left: 1030px;
    background-color: red;
    cursor: pointer;
    position: absolute;
    transition: .3s ease-in-out;
}

.crd_1:hover{
    transform: translateY(-35px);
    height: 320px;
    padding-bottom: 120px;
}

.crd_2:hover{
    transform: translateY(-35px);
    height: 320px;
    padding-bottom: 120px;
}
.crd_3:hover{
    transform: translateY(-35px);
    height: 320px;
    padding-bottom: 120px;
}
.crd_4:hover{
    transform: translateY(-35px);
    height: 320px;
    padding-bottom: 120px;
}

这是 CSS 部分。

这将使图片悬停并显示为卡片，但文本部分是我无法完成的，请帮助我

Answer 1

如果我理解正确，当图像悬停时您想要实现的将执行以下操作：

图片会'move'向上
文本将显示在下方

有几种方法可以实现这一点，我会做的是：

包裹你的图片和文字，这样悬停事件可以覆盖里面的元素：

  <div class='wrapper'>
   <img src="pics/ii.jpg" class="crd_1">
   <p class="crd1">hskgnskg<br>kdjfehbdbdgdf<br>jdbhfkdf</p>
  <div/>

将您的文本 'p' 标签设置为隐藏：display:none
像这样在包装器下相应地定位元素：

.wrapper:hover image {
    transform: translateY(-35px);
    height: 320px;
    padding-bottom: 120px;
}
.wrapper:hover p {
    display: unset;
}

悬停图片显示其下方的文字

picture on hover show text under it

html

css

computer-science