移动或隐藏<a> tag with css

Question

The thing that I don't know how to get rid of or move is following: When I'm using the while loop I get inline blocks just the way I want, but there is a link on every element and therefor the blocks are in done <a href>, but that <a> element throws the design out of whack. Left and right margins are correct, but top and bottom ones are 16px too big due to the a element. So if I can somehow move the element on top over the images do let me know. So I have this code:

<?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; ?>

With css being as follows:

.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;
}

Here is the screenshot of what I'm trying to hide:

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

Here也是小提琴

Answer 1

使用css hide元素/标记

1. .hide {opacity：0; }
2. .hide {visibility：hidden; }
3. .hide {display：none; }
4. .hide {position：absolute;上：-9999px;左：-9999px; }
5. .hide {clip-path：polygon（0px 0px，0px 0px，0px 0px，0px 0px）; }

或尝试

RefreshList