演示如何运作

Question

我正计划为我正在研究的网站进行导航。子菜单应该是6张图片，连续3张，所以它应该是一个有3行2列的网格。当然，整个事情应该是敏感的。将鼠标悬停在导航图像上时，应显示文本并使用rgba（0,0,0,0.5）背景居中显示图像。

我已经尝试了很多我发现的网络版本，但它们似乎都没有用。有人有想法吗？这是到目前为止的代码：

<div class="spa_nav">
<a href=""><img src="http://www.sportpresseagentur.at/wp-content/uploads/2015/09/17882.jpg" width="100%"/></a>
<h2>Testtext</h2>
</div>
<div class="spa_nav">
<a href=""><img src="http://www.sportpresseagentur.at/wp-content/uploads/2015/09/17882.jpg" width="100%"/></a>
<h2>Testtext</h2>
</div>
<div class="spa_nav">
<a href=""><img src="http://www.sportpresseagentur.at/wp-content/uploads/2015/09/17882.jpg" width="100%"/></a>
<h2>Testtext</h2>
</div>
<div class="spa_nav">
<a href=""><img src="http://www.sportpresseagentur.at/wp-content/uploads/2015/09/17882.jpg" width="100%"/></a>
<h2>Testtext</h2>
</div>
<div class="spa_nav">
<a href=""><img src="http://www.sportpresseagentur.at/wp-content/uploads/2015/09/17882.jpg" width="100%"/></a>
<h2>Testtext</h2>
</div>
<div class="spa_nav">
<a href=""><img src="http://www.sportpresseagentur.at/wp-content/uploads/2015/09/17882.jpg" width="100%"/></a>
<h2>Testtext</h2>
</div>

.spa_nav{
width:33.33%;
float:left;
}

.spa_nav h2{
text-align:center;
display:none;
}

.spa_nav:hover h2{
display:block;
}

我希望它看起来如何：http://www.cssscript.com/demo/image-caption-hover-animations-with-css3-transitions-and-transforms/index.html

jsfiddle已更新

Answer 1

example you gave包含了比你的jsfiddle更多的css，你的jsfiddle甚至不包含你想要的rgba（0,0,0，a）覆盖（示例代码）将其附加到名为blur的类。

演示如何运作

您正在使用<h2>代替演示使用的<h1>，但您需要在HTML中添加额外的类，例如

<div class="caption">
<div class="blur"></div>
<div class="caption-text">

此代码位于<h2>标记行的正上方。它看起来不像你正在使用标题文本，因此可以省略该行，但您可能希望将其保留到最后。

CSS基本上应该做的是使用opacity来显示/隐藏<h2>文本，css结尾:hover是一个伪类，并且一旦悬停完成就会运行由用户。带有transition和ease语句的css基本上告诉它在其他任何事情（如hover被调用）时执行淡入/淡出效果。

最简单的方法是启动一段新代码并使其与演示相同，然后立即更改一位并每次检查它是否有效。首先让代码使用一个图像，然后只复制并粘贴HTML 6次，然后将h1更改为 css和html中的h2，并更改{{1两者都改为li并更改任何类名，宽度或其他格式。

css末尾的一些重要事项是div（白色） - 设置标题颜色，color: #FFF确保标题显示在图像的顶部（不在后面）他们！）。您可以考虑使用z-index代替<li>，例如示例代码，它会让您删除项目符号并将宽度设置为33.3％，这样您就可以获得每行3个。以这种方式使用<div>来制作水平菜单是很常见的。

响应代码

您已使用百分比宽度，因此图片会自动调整大小。只需确保您的<li>标记带有<meta>声明（如果您不熟悉则请谷歌）。您可能会考虑对小屏幕进行布局更改，例如将其分为3个320px的垂直图像，只需要使用单行CSS媒体查询，使每个图像的宽度为320px及更小：viewport

对于非常大的屏幕，您可以使用类似的东西来代替水平行显示6个图像。这一切都取决于图像：有些看起来很好3到一个小屏幕上的线（宽度超过100px），其他人在非常大的屏幕上放大时可能看起来很差。关于图像的媒体查询有很多很好的博客。

图像导航与文本覆盖

1 个答案:

演示如何运作

响应代码