Question

我是Web Designing的新手。我正在使用Dreamweaver CS6流体网格布局进行设计，在全宽PC中有17列网格。

我没有显示完整的代码。我只是展示了我遇到问题的主要内容。问题来自于标题右下方的数字。它不会变得不可见，因为我可以说没有溢出的影响：隐藏;在上面。它只是坚持下方的数字img。我希望标题变得不可见，只有当我将鼠标悬停在图像上时才会显示...

HTML5 index.html

<div id="header">...</div>

<div id="wrapperContent">

<div id="div1">
<figure><img src="img/1.jpg"></figure>
<figcaption><a href="#">Manage Store Admin</a></figcaption>
</div>

<div id="div2">
<figure><img src="img/1.jpg"></figure>
<figcaption><a href="#">Manage Store Admin</a></figcaption>
</div>

<div id="div3">
<figure><img src="img/1.jpg"></figure>
<figcaption><a href="#">Manage Store Admin</a></figcaption>
</div>

<div id="div4">
<figure><img src="img/1.jpg"></figure>
<figcaption><a href="#">Manage Store Admin</a></figcaption>
</div>

</div>

<div id="footer">Copyright...</div>

CSS文件

figure, figure img
{
width: 300px; height: 500px; max-width: 100%; max-height: 100%; overflow:hidden;
}

figcaption, figcaption a
{
font-family: Baskerville; background: rgba(0,0,0,0.4); font-size: 1.5em;
padding: 0.5rem; text-align: center; color:#fff; position: relative;
text-decoration: none; bottom: 0px; transition: 2s all;
}

figure:hover figcaption a
{
bottom: 10px;
}

在流体网格布局layout.css

中

#wrapperContent
{
clear:both; float:left; margin-left: 0px; width: 100%; display:block;
}

#div1, #div2, #div3, #div4
{
clear:none; float: left; margin-left: 1.3761%; width: 22.477%;
max-width: auto; display:block; height: 100%;
}

我在这里展示了所有代码。请快速回复，以便继续我的项目

在流体网格布局中悬停图像的粘滞标题

0 个答案: