Adding Thumbnail Hover States
To add hover states to Thumbnails, navigate to the CSS Editor via the Design tab and paste the following CSS at the end:
.thumbnails .thumbnail > a {
position: relative;
}
.thumbnails .thumbnail .title {
background-color: rgba(0, 0, 0, 0.4);
padding: 0.5rem 1.2rem 0.7rem 1.2rem;
margin: 0rem;
color: rgba(255, 255, 255, 1);
align-content: center;
display: flex;
position: absolute;
left: 0rem;
top: 0rem;
right: 0rem;
bottom: 0rem;
z-index: 9;
opacity: 0;
}
.thumbnails .title span {
margin: auto;
display: inline-block;
}
.thumbnails .thumbnail:hover .title {
opacity: 1;
}
body.mobile .thumbnails .thumbnail:hover .title {
opacity: 0;
}