Menu icon Foundation
image grid archive with overlapping titles

Hi there! I'm having difficulty styling my grid archive page with featured image thumbnails of the posts, titles overlayed and preferrably vertically aligned to the bottom. On hover, the image is meant to go to 40% transparent over an equal sized box of the blue highlight colour, and the title would ideally change to orange. However, no matter what I do I can't seem to get the image to go to the back, and the blue box to inherit it's size.

I'm using the Joints WP CSS theme.

A screen shot of what it currently looks like on hover is attached.Current archive with issue

I have also attached an example of what I want. It is my squarespace site (www.erinstruble,.com), but I don't have access to the file so I can't figure it out from there. I want it just like this, but with the titles displayed all the time, not just on hover.

Squarespace site grid example

Code I gave up with is below:

PHP in loop-archive-grid.php

<!--Item: -->
<div class="large-3 medium-4 columns panel" data-equalizer-watch>

    <article id="<?php the_ID(); ?>" <?php post_class(''); ?> role="article">
        <section class="archive-item-wrapper" itemprop="articleBody">
            <a href="<?php the_permalink() ?>" rel="bookmark"><?php the_post_thumbnail('medium'); ?></a>
            <span class="archive-thumbnail-title"><h4><?php the_title(); ?></h4></span>
        </section>
</div>

CSS:

.archive-item-wrapper {
    background-color: #c2e5de;
    position: relative;
    height: 100%;
    width: 100%;
}

a img {
    position: absolute;
    display: block;
    z-index: 999;
}

.wp-post-image {
    z-index: 999;
}

a img:hover {
    opacity: .4;
}

.archive-thumbnail-title {
    width: 100%;
    height: 100%;
    padding: 0.8rem;
    z-index: 1;
    text-align: left;
    
}

 

archivegridarchivewrappersz-index

Hi there! I'm having difficulty styling my grid archive page with featured image thumbnails of the posts, titles overlayed and preferrably vertically aligned to the bottom. On hover, the image is meant to go to 40% transparent over an equal sized box of the blue highlight colour, and the title would ideally change to orange. However, no matter what I do I can't seem to get the image to go to the back, and the blue box to inherit it's size.

I'm using the Joints WP CSS theme.

A screen shot of what it currently looks like on hover is attached.Current archive with issue

I have also attached an example of what I want. It is my squarespace site (www.erinstruble,.com), but I don't have access to the file so I can't figure it out from there. I want it just like this, but with the titles displayed all the time, not just on hover.

Squarespace site grid example

Code I gave up with is below:

PHP in loop-archive-grid.php

<!--Item: -->
<div class="large-3 medium-4 columns panel" data-equalizer-watch>

    <article id="<?php the_ID(); ?>" <?php post_class(''); ?> role="article">
        <section class="archive-item-wrapper" itemprop="articleBody">
            <a href="<?php the_permalink() ?>" rel="bookmark"><?php the_post_thumbnail('medium'); ?></a>
            <span class="archive-thumbnail-title"><h4><?php the_title(); ?></h4></span>
        </section>
</div>

CSS:

.archive-item-wrapper {
    background-color: #c2e5de;
    position: relative;
    height: 100%;
    width: 100%;
}

a img {
    position: absolute;
    display: block;
    z-index: 999;
}

.wp-post-image {
    z-index: 999;
}

a img:hover {
    opacity: .4;
}

.archive-thumbnail-title {
    width: 100%;
    height: 100%;
    padding: 0.8rem;
    z-index: 1;
    text-align: left;
    
}