我正在创建一个缩略图库。当您将鼠标悬停在图片上时，就会看到标题和说明。我希望标题和描述集中在悬停div内。
因为我将悬停div定位为绝对值，所以在使用常规表格方法垂直对齐时遇到了麻烦。每当我调整视口大小时，文本就不再位于中间。
任何帮助，将不胜感激。
这是jsfiddle示例：http : //jsfiddle.net/Forresty/2snra4tL/1/
这是代码：
HTML：
<a class="work_item_link" href="#">
<div class="work_item">
<img src="http://www.personal.psu.edu/ivs5030/plant.jpg" >
<div class="item_hover">
<div class="item_description">
<h4>Item Heading</h4>
<p>ITEM DESCRIPTION</p>
</div>
</div>
</div>
</a>
<a class="work_item_link" href="#">
<div class="work_item">
<img src="http://www.personal.psu.edu/ivs5030/plant.jpg">
<div class="item_hover">
<div class="item_description">
<h4>Item Heading</h4>
<p>ITEM DESCRIPTION</p>
</div>
</div>
</div>
</a>
<a class="work_item_link_no_margin" href="#">
<div class="work_item">
<img src="http://www.personal.psu.edu/ivs5030/plant.jpg">
<div class="item_hover">
<div class="item_description">
<h4>Item Heading</h4>
<p>ITEM DESCRIPTION</p>
</div>
</div>
</div>
</a>
CSS：
.work_item_link {
position: relative;
width: 32%;
height: auto;
float: left;
margin-right: 2%;
//overflow: hidden;
&:hover {
.item_hover {
opacity: 1;
}
}
img {
width: 100%;
display: block;
}
}
.work_item_link_no_margin {
position: relative;
width: 32%;
height: auto;
float: left;
//overflow: hidden;
&:hover {
.item_hover {
opacity: 1;
}
}
img {
width: 100%;
display: block;
}
}
.item_hover {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: red;
opacity: 0;
transition: all 1s;
}
我回答了我自己的问题。
最终的代码可以在这里看到：http : //jsfiddle.net/Forresty/2snra4tL/4/
我添加了另一个div作为包含包含文本的div的表。
再次感谢。
HTML：
<a class="work_item_link" href="#">
<div class="work_item">
<img src="http://www.personal.psu.edu/ivs5030/plant.jpg" >
<div class="item_hover">
<div class="center">
<div class="item_description">
<h4>Item Heading</h4>
<p>ITEM DESCRIPTION</p>
</div>
</div>
</div>
</div>
</a>
<a class="work_item_link" href="#">
<div class="work_item">
<img src="http://www.personal.psu.edu/ivs5030/plant.jpg">
<div class="item_hover">
<div class="center">
<div class="item_description">
<h4>Item Heading</h4>
<p>ITEM DESCRIPTION</p>
</div>
</div>
</div>
</div>
</a>
<a class="work_item_link_no_margin" href="#">
<div class="work_item">
<img src="http://www.personal.psu.edu/ivs5030/plant.jpg">
<div class="item_hover">
<div class="center">
<div class="item_description">
<h4>Item Heading</h4>
<p>ITEM DESCRIPTION</p>
</div>
</div>
</div>
</div>
</a>
SCSS：
.work_item_link {
position: relative;
width: 32%;
height: auto;
float: left;
margin-right: 2%;
&:hover {
.item_hover {
opacity: 1;
}
}
img {
width: 100%;
display: block;
}
}
.work_item_link_no_margin {
position: relative;
width: 32%;
height: auto;
float: left;
&:hover {
.item_hover {
opacity: 1;
}
}
img {
width: 100%;
display: block;
}
}
.item_hover {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: red;
opacity: 0;
transition: all 1s;
}
.center{
width: 100%;
height: 100%;
display: table;
text-align: center;
}
.item_description{
display: table-cell;
vertical-align: middle;
p, h4{
margin: 0;
}
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句