Hover Effect for Masonry Grid | 7.1

On 4/28/2020 at 4:24 AM, tuanphan said:

Add to Home > Design > Custom CSS

figure.gallery-masonry-item .gallery-masonry-item-wrapper:before {
    background-color: rgba(0,0,0,0.7);
    content: "";
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 999;
    opacity: 0;
    transition: all 0.5s;
}
figure.gallery-masonry-item:hover .gallery-masonry-item-wrapper:before {
    opacity: 1;
    transition: all 0.5s;
}

 

This is working, tried messing with the code a bit to do a reverse hover. Basically want the image to be dark to start and then pop to color on hover. Would also like it to zoom a bit on hover if possible.

Would also like to have titles and maybe descriptions on each image. I'd like the title to be there with or without hover. Not sure about description yet.

15 hours ago, crrjuilliard said:

Would also like to have titles and maybe descriptions on each image. I'd like the title to be there with or without hover. Not sure about description yet.

If you share link to your page, I can check carefully

8 hours ago, tuanphan said:

If you share link to your page, I can check carefully

cherieroe.com/work-with-me (pw is password)

Am I able to make the images clickable to a link as well? Don't want to add buttons, just titles and/or descriptions

22 hours ago, crrjuilliard said:

Am I able to make the images clickable to a link as well? Don't want to add buttons, just titles and/or descriptions

 

You mean 3 images under header?

When editing images, there is a box to fill URL. Have you tried checking yet?

23 hours ago, tuanphan said:

You mean 3 images under header?

When editing images, there is a box to fill URL. Have you tried checking yet?

Ah, my bad. Knew I was kinda blanking on where to put that in. I've put in links now but it's still not clickable. Wondering if it has to do with it being masonry grid? 

Also wanted to follow up, how can I invert the hover colors (all dark, full color on hover) and add custom titles?

3 hours ago, crrjuilliard said:

Ah, my bad. Knew I was kinda blanking on where to put that in. I've put in links now but it's still not clickable. Wondering if it has to do with it being masonry grid? 

Also wanted to follow up, how can I invert the hover colors (all dark, full color on hover) and add custom titles?

Edit your code to this

figure.gallery-masonry-item .gallery-masonry-item-wrapper a:before {
    background-color: rgba(0,0,0,.5);
    content: "";
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 999;
    opacity: 0;
    transition: all .5s
}

figure.gallery-masonry-item:hover .gallery-masonry-item-wrapper a:before {
    opacity: 1;
    transition: all .5s
}

Hover color, it seems you solved?

with custom title, you want to add title under logo?

On 5/31/2020 at 3:59 AM, tuanphan said:

Edit your code to this

figure.gallery-masonry-item .gallery-masonry-item-wrapper a:before {
    background-color: rgba(0,0,0,.5);
    content: "";
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 999;
    opacity: 0;
    transition: all .5s
}

figure.gallery-masonry-item:hover .gallery-masonry-item-wrapper a:before {
    opacity: 1;
    transition: all .5s
}

Hover color, it seems you solved?

with custom title, you want to add title under logo?

Perfect and yes, got the color too. Wanting to add a title onto each picture in the grid. Also, trying to figure out code to have the images zoom a bit on hover, but still stay inside the container. Essentially, want the size of pic to be same, just zoomed in a bit.

On 6/1/2020 at 7:09 PM, crrjuilliard said:

Perfect and yes, got the color too. Wanting to add a title onto each picture in the grid. Also, trying to figure out code to have the images zoom a bit on hover, but still stay inside the container. Essentially, want the size of pic to be same, just zoomed in a bit.

figure.gallery-masonry-item .gallery-masonry-item-wrapper {
    overflow: hidden;
}
figure.gallery-masonry-item .gallery-masonry-item-wrapper img {
    transition: all 0.5s;
}
figure.gallery-masonry-item:hover .gallery-masonry-item-wrapper img {
    transform: scale(1.1);
}

5 hours ago, tuanphan said:

figure.gallery-masonry-item .gallery-masonry-item-wrapper {
    overflow: hidden;
}
figure.gallery-masonry-item .gallery-masonry-item-wrapper img {
    transition: all 0.5s;
}
figure.gallery-masonry-item:hover .gallery-masonry-item-wrapper img {
    transform: scale(1.1);
}

 

PERFECT, thank you so much! Any idea how to add text/titles on each image in the gallery? Would like to be able to customize the title's size, font and color obviously, but I should be able to play around with that after getting the initial code. Thanks again for all your help.

4 hours ago, crrjuilliard said:

PERFECT, thank you so much! Any idea how to add text/titles on each image in the gallery? Would like to be able to customize the title's size, font and color obviously, but I should be able to play around with that after getting the initial code. Thanks again for all your help.

Edit image > I Guess you will a box to enter Title + URL?

17 hours ago, tuanphan said:

Edit image > I Guess you will a box to enter Title + URL?

I have them set up to link to something, that's not a problem. But actually putting a caption/title over top of each image, i can't figure out. Adding a description and turning on captions on the grid shows what I entered but it's under the image. I want it on top of the image and to be able to edit placement, font, size, color, etc.

On 6/4/2020 at 12:32 PM, crrjuilliard said:

I have them set up to link to something, that's not a problem. But actually putting a caption/title over top of each image, i can't figure out. Adding a description and turning on captions on the grid shows what I entered but it's under the image. I want it on top of the image and to be able to edit placement, font, size, color, etc.

Got words on the pictures, but trying to customize placement a bit more and what the actual words are. Also, how can I make the words not be affected by the overlay opacity? Can you check out my code I've added in the site? cherieore.com, password is password

15 minutes ago, crrjuilliard said:

Got words on the pictures, but trying to customize placement a bit more and what the actual words are. Also, how can I make the words not be affected by the overlay opacity? Can you check out my code I've added in the site? cherieore.com, password is password

Also, file names are now showing on my logo slideshow on the home page too. How can I keep titles/captions on the "Work With Me" page and off of the logos on the home page?

On 6/9/2020 at 2:15 AM, crrjuilliard said:

Also, file names are now showing on my logo slideshow on the home page too. How can I keep titles/captions on the "Work With Me" page and off of the logos on the home page?

It seems you used brandon's code. I remember SS 7.1 supported Gallery Caption last week.

Add to Home > Design > Custom CSS to remove image title on homepage

.homepage .gallery-item-description {
    display: none;
}

On 6/4/2020 at 1:21 AM, crrjuilliard said:

PERFECT, thank you so much! Any idea how to add text/titles on each image in the gallery? Would like to be able to customize the title's size, font and color obviously, but I should be able to play around with that after getting the initial code. Thanks again for all your help.

Add to Work With Me page Settings > Advanced > Header

<style>
  .gallery-item-description {
    color: red !important;
    font-size: 23px !important;
}
</style>

2 hours ago, tuanphan said:

It seems you used brandon's code. I remember SS 7.1 supported Gallery Caption last week.

Add to Home > Design > Custom CSS to remove image title on homepage

.homepage .gallery-item-description {
    display: none;
}

 

This worked to get rid of the captions on home page! And Brandon's code worked well. I'm almost there. The only other thing I want to change is to have the description/title not affected by the overlay opacity.  Or at least have the description opacity be different. The Javascript you gave me works to change the color and size of the text but I'm already able to do that with brandon's code. Unless I'm missing something or the purpose of that javascript?

2 hours ago, tuanphan said:

Add to Work With Me page Settings > Advanced > Header

<style>
  .gallery-item-description {
    color: red !important;
    font-size: 23px !important;
}
</style>

 

Was also interested in seeing what vertical captions/descriptions would look like. How could I do that with these?

8 hours ago, crrjuilliard said:

This worked to get rid of the captions on home page! And Brandon's code worked well. I'm almost there. The only other thing I want to change is to have the description/title not affected by the overlay opacity.  Or at least have the description opacity be different. The Javascript you gave me works to change the color and size of the text but I'm already able to do that with brandon's code. Unless I'm missing something or the purpose of that javascript?

 

so all your problem is?

6 hours ago, tuanphan said:

so all your problem is?

Right now, the opacity is affecting the image and the text. I want the text to not be affected by the opacity (so full color text whether you're hovering or not).