Moving or hiding 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:

At the bottom of the image there is about 10px that I don't want to show. And it is on every image.

Here is also fiddle

I'm not sure I follow what you want. Can you add a screenshot? — Aleks G, Oct 24 '16 at 13:31
Even though the other question is about image in a `div` the problem is most likely the same, so it is a possible duplicate of [Image inside div has extra space below the image](http://stackoverflow.com/questions/5804256/image-inside-div-has-extra-space-below-the-image) — t.niese, Nov 05 '16 at 13:36

score 0 · Answer 1 · answered Oct 24 '16 at 13:29

using css hide element/tag

.hide { opacity: 0; }
.hide { visibility: hidden; }
.hide { display: none; }
.hide { position: absolute; top: -9999px; left: -9999px; }
.hide { clip-path: polygon(0px 0px,0px 0px,0px 0px,0px 0px); }

or try it

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

Moving or hiding tag with css

1 Answers1