Support

May 31, 2016 at 11:19 am

Hello,

Try this CSS for changing the styling:

.ee_grid_box img {
opacity: 0.4; 
}

.ee_grid_box span {
position:absolute;
top:5px;
color:#000;
left:10px;
right:10px;
opacity:0;
}

.ee_grid_box a.darken span{
	color:#fff;
    -webkit-transition: all 0.5s linear;
       -moz-transition: all 0.5s linear;
        -ms-transition: all 0.5s linear;
         -o-transition: all 0.5s linear;
            transition: all 0.5s linear;
	opacity:1;

}

If your theme has a Custom CSS area built-in, then you can add it there through your WP dashboard. Otherwise, you could use a free plugin that adds an additional stylesheet to your WordPress site such as Simple Custom CSS or Reaktiv CSS Builder.

You can then go back to your site and refresh the page with the grid on it to see the new changes.

—
Lorenzo

May 31, 2016 at 4:45 pm

Hello,

Black text on an already dark background may be difficult to read. Is that what you are trying to setup?

Also, you may want to add an actual featured image to an event to see what this may look like.

—
Lorenzo

June 1, 2016 at 7:03 am

Hi, could you share a link to the page so we can see what you currently have?

Thanks

—
Lorenzo

June 1, 2016 at 1:08 pm

The CSS that Lorenzo posted should work to make the text white. Have you tried adding the CSS?

June 2, 2016 at 3:20 am

You’ll need to change some of the CSS Lorenzo provided for that, change this:

.ee_grid_box a.darken span{
	color:#fff;
    -webkit-transition: all 0.5s linear;
       -moz-transition: all 0.5s linear;
        -ms-transition: all 0.5s linear;
         -o-transition: all 0.5s linear;
            transition: all 0.5s linear;
	opacity:1;

}

to this:

.espresso-grid .ee_grid_box a.darken span {
    color: #fff;
    -webkit-transition: all 0.5s linear;
    -moz-transition: all 0.5s linear;
    -ms-transition: all 0.5s linear;
    -o-transition: all 0.5s linear;
    transition: all 0.5s linear;
    opacity: 1;
}

(Note the additional .espresso-grid selector)

Now add this:

.espresso-grid .ee_grid_box a.darken:hover span {
    color: blue;
}

Change the colour to whichever value you prefer.