Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search

Hover Effect for Masonry Grid | 7.1


Recommended Posts

 

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.

Link to comment
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

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
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?

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
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?

Edited by crrjuilliard
Link to comment
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?

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
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.

Link to comment
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);
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
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.

Link to comment
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?

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
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.

Link to comment
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

Link to comment
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?

Link to comment
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;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
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>

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
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?

 

Link to comment
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?

Link to comment
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?

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...