[英]picture on hover show text under it
I'm trying to make a page and within it I'm making that when a picture is hovered on it will show like a card and text will appear under it but I'm not sure how to make the text part happen this is what I have for now (I'm a beginner)我正在尝试制作一个页面,并且在其中我正在制作当图片悬停在它上面时它会显示为一张卡片并且文本会出现在它下面但我不确定如何使文本部分发生这就是我现在有(我是初学者)
<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">
this is the HTML part.这是 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;
}
this is the CSS part.这是 CSS 零件。
this will make the picture go up on hover and display as a card,but the text part is the one I'm not able to do if you could please help me这将使图片 go 出现在 hover 上并显示为卡片,但如果你能帮助我,文本部分是我无法做到的
If I understand correctly, what you are trying to achieve when the the image is hovered it will do the following:如果我理解正确,当图像悬停时您要实现的目标将执行以下操作:
There are several ways to achieve this, what I would do is:有几种方法可以实现这一点,我要做的是:
<div class='wrapper'>
<img src="pics/ii.jpg" class="crd_1">
<p class="crd1">hskgnskg<br>kdjfehbdbdgdf<br>jdbhfkdf</p>
<div/>
display:none
display:none
.wrapper:hover image {
transform: translateY(-35px);
height: 320px;
padding-bottom: 120px;
}
.wrapper:hover p {
display: unset;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.