gpt4 book ai didi

html - 将 flexbox 用于图形的 figcaption

转载 作者:行者123 更新时间:2023-11-28 16:25:48 24 4
gpt4 key购买 nike

主要目标是使 figcaptions 的内容具有最大的自适应性,因为我们不知道其内容的确切大小。图的标题始终显示,当我们将鼠标悬停时,图标题会显示其完整大小的内容。为什么选择 flex 盒子?未悬停的图形将文本描述压缩为 0。悬停 flexbox 何时增长?我知道这是可能的,但我想念一些东西来实现它。对我的错误有什么想法吗?

* {
box-sizing: border-box;
}
body {
font-family: "Open Sans", sans-serif;
}
.wrapper {
text-align: center;
}
img{
vertical-align: middle;
}
figure {
display: inline-block;
margin: 50px auto;
border: 1px solid #333;
position: relative;
}
figcaption {
display: flex;
flex-direction: column;
justify-content: flex-end;
align-content: flex-end;
text-align: left;
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
color: #fff;
}
.news-title {
border: 1px solid green;
transition: 300ms;
}
h3 {
font-size: 18px;
font-weight: 600;
padding: 10px;
background: rgba(0,0,0,.3);
margin: 0;
}
span {
flex: 0;
overflow: hidden;
border: 1px solid red;
transition: 300ms;
background: rgba(0,0,0,.3);
}
figure:hover span {
flex: 1;
transition: 500ms;
}
<div class="wrapper">
<figure>
<img src="http://nikolad0.bget.ru/img/news-preview.png" alt="" />
<figcaption>
<div class="news-title">
<h3>Lorem ipsum dolor</h3>
</div>
<span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora minima natus repellat optio! Dignissimos, cum quaerat distinctio quibusdam numquam accusantium ipsam laudantium excepturi impedit, laborum cupiditate, nihil reiciendis? Minima, error!</span>
</figcaption>
</figure>
</div>

最佳答案

 <style>
* {
box-sizing: border-box;
}
body {
font-family: "Open Sans", sans-serif;
}
.wrapper {
text-align: center;
}
img{
vertical-align: middle;
}
figure {
display: inline-block;
margin: 50px auto;
border: 1px solid #333;
position: relative;
}
figcaption {
display: block;
text-align: left;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
color: #fff;
}
.news-title {
border: 1px solid green;
/*transition: 300ms;*/
}
h3 {
font-size: 18px;
font-weight: 600;
padding: 10px;
background: rgba(0,0,0,.3);
margin: 0;
}
span {
display: none;
width:100%;
overflow: hidden;
border: 1px solid red;
/*transition: 300ms;*/
background: rgba(0,0,0,.3);
}
/*figure:hover span {

transition: 500ms;
}*/
</style>




<div class="wrapper">
<figure>
<img src="http://nikolad0.bget.ru/img/news-preview.png" alt="" />
<figcaption>
<div class="news-title">
<h3>Lorem ipsum dolor</h3>
</div>
<span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora minima natus repellat optio! Dignissimos, cum quaerat distinctio quibusdam numquam accusantium ipsam laudantium excepturi impedit, laborum cupiditate, nihil reiciendis? Minima, error!</span>
</figcaption>
</figure>
</div>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<!--<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>-->
<script>
$(document).ready(function () {
$("figure").hover(function () {
$("span").slideToggle();

})

});
</script>

关于html - 将 flexbox 用于图形的 figcaption,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36128260/

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