gpt4 book ai didi

html - 如何在悬停时添加文本

转载 作者:行者123 更新时间:2023-12-05 08:55:25 32 4
gpt4 key购买 nike

https://codepen.io/dhanushbadge/pen/uJkcq

您好,我的问题是关于在将鼠标悬停在 img 上时添加添加图标和文本。悬停时它显示灰色,但我希望它也显示 3 个图标和顶部的文本。悬停时,我似乎无法在圆圈内添加文字。原始代码在链接中请帮忙pppppppp

html {
font-size:62.5%;
}
body {
margin:0;
font-size:1.4rem;
font-family:arial;
background-color:#ddd;
}
img {
border:0;
width:100%;
height:100%;
}
#team {
max-width:96rem;
width:100%;
min-height:200px;
height:auto;
margin:0 auto;
background-color:white;
box-sizing:border-box;
padding:0;
display:-webkit-flex;
display:flex;
-webkit-align-items:center;
align-items:center;
-webkit-justify-content:center;
justify-content:center;
-webkit-flex-direction:row;
flex-direction:row;
-webkit-flex-wrap:wrap;
flex-wrap:wrap;
-webkit-align-content:flex-end;
align-content:flex-end;
}
figure {
width:12.5rem;
height:12.5rem;
display:block;
margin:0.5rem 1rem 4rem 0.5rem;
padding:0;
box-sizing:content-box;
color:black;
}
figure img {
-webkit-border-radius:50%;
-moz-border-radius:50%;
border-radius:50%;
}
#team figure img {
-webkit-transition:opacity 0.26s ease-out;
-moz-transition:opacity 0.26s ease-out;
-ms-transition:opacity 0.26s ease-out;
-o-transition:opacity 0.26s ease-out;
transition:opacity 0.26s ease-out;


}
#team:hover img, #team:active img {
opacity:1;
}
#team:hover img:hover, #team:active img:active {
opacity:0.3;

}
figcaption {
font-size:1.2rem;
text-align:center;
}
<div id="team">
<figure><img src="http://500px.com/graphics/pages/team/squares/oleg.jpg"><figcaption>Oleg Gutsol</figcaption></figure>
<figure><img src="http://500px.com/graphics/pages/team/squares/evgeny.jpg"><figcaption>Evgeny Tchebotarev</figcaption></figure>
<figure><img src="http://500px.com/graphics/pages/team/squares/dustin.jpg"><figcaption>Dustin Plett</figcaption></figure>
<figure><img src="http://500px.com/graphics/pages/team/squares/adam.jpg"><figcaption>Adam Shutsa</figcaption></figure>
<figure><img src="http://500px.com/graphics/pages/team/squares/roxy.jpg"><figcaption>Roxy Keshavarznia</figcaption></figure>
<figure><img src="http://500px.com/graphics/pages/team/squares/eric.jpg"><figcaption>Eric Akaoka</figcaption></figure>
<figure><img src="http://500px.com/graphics/pages/team/squares/david.jpg"><figcaption>David Charlec</figcaption></figure>

</div>

最佳答案

您是否正在尝试做这样的事情(请参阅带标题的鼠标悬停)https://codepen.io/kw7oe/pen/mPeepv

要实现这一点,您需要这样构造您的 html

<figure>
<img src="" alt="">
<span class="caption">{content}</span>
</figure>

本例中的 span 类默认不透明度为 0,悬停时不透明度变为 1。使用一些 css 过渡,我们得到了平滑的出现和消失效果。在这种情况下,图形将具有相对定位,以便跨度可以绝对悬停在整个事物上。

figure { position: relative; display: block; overflow: hidden; }
figure img { max-width: 100% }
figure .caption { position: absolute; display: block; top: 0; left: 0; height: 100%; width: 100%; opacity: 0; transition: all .2s ease-in-out }
figure:hover .caption { opacity: 1; }

您可以在 codepen 上轻松搜索 image hover caption 并找到不少不错的示例。

关于html - 如何在悬停时添加文本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45972664/

32 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com