- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
主要目标是使 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/
好的,所以我有 3 张图片,图片中间有边框。图像设置为 0.5 不透明度,然后在悬停时设置为 1.0 不透明度。我希望图形说明及其边框始终位于图像之上。现在,图形说明及其边框位于图像下方,当我将鼠标悬
我正在尝试制作 当内容的宽度超过 的宽度时元素呈现滚动条兄弟,通常是当内容是一个长 URL 或一个很长的单词时。 以下代码改编自this answer它适用于 IE 11 和 Edge 15,但不适
在网上搜索了数周,但找不到满足我所有需求(仅部分需求)的答案,非常欢迎帮助。 我想要的和已经完成的: 纯 HTML5 兼容和 CSS 在文章中显示图片 图片必须有标题 标题必须在图片下方 标题必须限制
我试图将我的 figcaption 放在 img 下。我不知道为什么它会向右移动。我在页面上还有其他图片,它们的标题没有向右显示,而是在图片下方,但在这张图片上,它不在下方,而应该在下方。有人可以帮助
我正在尝试使用 jquery.caption ( https://github.com/louisbros/jquery.caption )。我希望标题位于带有白色文本的黑色矩形中。当我将鼠标悬停在我
当前: 我有 10 张带有 figcaption 的单独图像,它们用作复选框。当用户在图像上滚动鼠标时,图像上会显示 figcaption。一旦用户选择图像并移出鼠标,图形说明就会消失。 问题和预期结
我想要在这张图片中间的图片旁边添加一个图形说明。我怎样才能做到这一点?我试过这样: xxx 但标题仍然在图像的顶部。 最佳答案 您可以将图形显示为 flex,然后使用自动边距
我想知道为什么我的figcaption没有显示 我正在执行通常的代码: Fimmvörðuháls 截图:http://prntscr.com/
我有一个问题,figcaption 比 img 宽,因此突出到它的右边。我对标题的 width 进行了硬编码并且它有效,但仅适用于相同宽度的图像。 HTML Vader e
在一个对话框中,我想在同一行显示几个带有标题的下载链接:
fiddle :http://jsfiddle.net/dXd26/ 代码: HTML:
我想添加一个figcaption,这是一段解释我的图像的段落,我想把它放在图像本身的旁边(如果段落太长,我希望文本可以完成旁边的空间后在图像下方)。我搜索了命令和 CSS,但没有找到任何东西。 最佳答
我正在为一张图片制作一个无形标题,我想将它链接到一个单独的 pdf 文档。可见http://cascade.webuda.com/collection.html哪里说 2013 cascade luc
TL;DR:是的,我“遗漏了一些明显的东西”。对此感到抱歉。 将图像放在图形中效果很好,所有边框都很好地嵌套: 但是当我添加一个图形标题时,图像的大小保持不变并溢出图形: 这就像图像的“高度:100%
我即将从头开始开发我的第一个 WordPress 主题:http://bit.ly/16baqTI 主页上的响应式图像网格出现问题。当您缩小浏览器视口(viewport)时,图像无法正确缩放。这个测试
我正在构建一个包含 3 行 3 列图像的导航框。我的目标是在每张图片下方添加一些文字。我今天遇到了“figcaption”,尽管它接缝就像完美的标签,但我无法接缝以使其正确显示。 问题在我添加“fig
我有一个网站,当用户将鼠标悬停在图片上时,图形标题会向上滑动。 我的屏幕分辨率是 1024 x 768,图像分辨率是 300 x 400 像素。它非常适合我的屏幕分辨率。最近我意识到响应式网站的重要性
假设我有以下 HTML: The Sun - a sinister and destructive force. Image from the SOHO research facility. 如
我在 figure 中有一个图像和一个标题标签。我想知道如何获得 figcaption位于 img 旁边并垂直居中,如所附图像。 这是一个 jsfiddle我设置。 谢谢! 最佳答案 在这里,只需将
我有一个带有图形说明的图形。我想将 figcaption 放在 figure img 旁边,如下图所示。 我已经尝试过转换 rotate 和 origin 之类的方法,但问题似乎在于它不适合父对象的新
我是一名优秀的程序员,十分优秀!