@Ziggy
Yes! This is my website.
These are the two pages I want to change:
https://johnnaslaby.com/store
https://johnnaslaby.com/art
And I want to make the images like this page on my site: https://johnnaslaby.com/journal
I had to put the code in there for that one but I don't know how to make it so that I have the same effect for the store page as well.
This is the code that I used for the /journal page I believe:
/* show title on hover */
.blog-basic-grid--text {
opacity: 0;
transition: opacity 0.25s ease-out;
}
.blog-item:hover .blog-basic-grid--text {
opacity: 1;
}
/* show overlay on hover */
.blog-item .image-wrapper:after {
position: absolute;
content: "";
background: rgba(255,255,255, 0.9);
top: 0;
bottom: 0;
left: 0;
right: 0;
opacity: 0;
transition: opacity 0.25s ease-out;
}
.blog-item:hover .image-wrapper:after {
opacity: 1;
}
.blog-basic-grid--text {
position: absolute;
top: 50%;
left: 50%;
width: 100%;
transform: translate(-50%,-50%);
z-index: 9999;
}
article {
position: relative;
}