html - 使用 css 移动或隐藏 标签

Question

我不知道如何摆脱或移动的事情如下:当我使用 while 循环时，我按照我想要的方式获得内联 block ，但是每个元素都有一个链接，因此 block 已完成 <a href> ，但是<a>元素使设计乱七八糟。左右边距是正确的，但由于 a 元素，顶部和底部的边距太大了 16px。因此，如果我能以某种方式将元素移动到图像上方，请告诉我。所以我有这段代码:

<?php while( have_rows('vsi_projekti') ): 
    the_row();
?>      
<div class="post-grid">
    <a href="<?php echo $var1; ?>">
    <div class="post-title-hover"><?php echo $var2 ?></div>
    <img src="../something.jpg" class="thumbnail-custom-post" />
    <img src="../something.jpg" alt="" class="post-grid-bg" />
    </a>
</div>
<?php endwhile; ?>

css如下:

.post-grid{
    display: inline-block;
    margin: 10px;
    overflow: hidden;
    border: 0;
    background: #fff;
    width: 31%;
    position: relative;
}

.post-title-hover {
    opacity: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    color: #000;
    overflow: hidden;
    -moz-transform: translate(-50%, -50%); /* Firefox */
    -ms-transform: translate(-50%, -50%); /* IE 9 */
    -webkit-transform: translate(-50%, -50%); /* Chrome, Safari, Opera */
    transform: translate(-50%, -50%);   
    font: 400 20px 'rajdhani', sans-serif;
    text-align: center; 
}
.post-grid-bg {
    position: absolute;
    left: 50%;
    top: 48.5%;
    opacity: 0;
    -moz-transform: translate(-50%, -50%); /* Firefox */
    -ms-transform: translate(-50%, -50%); /* IE 9 */
    -webkit-transform: translate(-50%, -50%); /* Chrome, Safari, Opera */
    transform: translate(-50%, -50%);
    transition: all 0.3s linear;
    -moz-transition: all 0.3s linear;
    -webkit-transition: all 0.3s linear;
    -o-transition: all 0.3s linear;
}
.post-grid:hover .post-grid-bg {
    opacity: 1;
    z-index: 3;
}
.thumbnail-custom-post {
    position:relative;
}

这是我要隐藏的内容的屏幕截图:

在图像的底部有大约 10px 的区域我不想显示。它出现在每张图片上。

Here也是 fiddle

Answer 1

使用 css 隐藏元素/标签

1. .hide { 不透明度:0;
2. .hide { 可见性:隐藏；
3. .hide { 显示:无；
4. .hide { position:absolute；顶部:-9999px；左:-9999px；
5. .hide { 剪辑路径:多边形(0px 0px，0px 0px，0px 0px，0px 0px)；

或尝试一下

Try setting display:none to hide and set display:block to show.