Thumbnail Hover States — Cargo Support Window

Thumbnail Hover States

See our Support Page on Adding Thumbnail Hover States. Note: some templates may already have this CSS included.

In the Design tab, open the CSS Editor and look for selector defining .thumbnails .thumbnail > a, you can add a statement setting overflow: hidden:

.thumbnails .thumbnail > a {
    position: relative;
}

For .thumbnails .thumbnail .title, try adding or removing statements defining top, bottom, left and right, or setting them to values greater than 0:

.thumbnails .thumbnail .title {
    background: rgba(255, 255, 255, 0.4);
    padding: 0.5rem 1.2rem 0.7rem 1.2rem;
    margin: 2.4rem;
    color: rgba(234, 34, 31, 1);
    align-content: center;
    display: flex;
    position: absolute;
    top: 7rem;
    bottom: 7rem;
    left: 7rem;
    right: 7rem;
    z-index: 9;
    opacity: 0;
}

For .thumbnails .thumbnail span, try adding / removing the statement margin: auto:

.thumbnails .title span {
    margin: auto;
    display: inline-block;
}

The selector for ****body.mobile .thumbnails .thumbnail:hover .title makes Titles transparent upon hover for the mobile version of the Site. To make them visible in this case, you can remove this section of code, or set the opacity to 1:

body.mobile .thumbnails .thumbnail:hover .title {
    opacity: 0;
}

The code is written to affect only Titles. You can add similar code that will affects Tags:

.thumbnails .thumbnail .tags {
    padding: 0.5rem 1.2rem 0.7rem 1.2rem;
    margin: 0rem 10rem 0 0;
    color: rgba(0, 0, 0, 1);
    position: relative;
    display: inline;
    text-align: center;
    left: 0rem;
    top: 0.;
    bottom: 6rem;
    z-index: 9;
    opacity:0;
}
.thumbnails .tags span {
    margin: auto;
    display: inline-block;
}
.thumbnails .thumbnail:hover .tags {
    opacity: 1;
}
body.mobile .thumbnails .thumbnail:hover .tags {
    opacity: 0;
}