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

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.

Share this post


Link to post

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.

Share this post


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


You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan. I work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. There are so many questions every day so I can't answer them all at once, I will try to answer them in the next few days.

Share this post


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


You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan. I work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. There are so many questions every day so I can't answer them all at once, I will try to answer them in the next few days.

Share this post


Link to post
Posted (edited)
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

Share this post


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


You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan. I work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. There are so many questions every day so I can't answer them all at once, I will try to answer them in the next few days.

Share this post


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

Share this post


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

 


You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan. I work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. There are so many questions every day so I can't answer them all at once, I will try to answer them in the next few days.

Share this post


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

Share this post


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


You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan. I work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. There are so many questions every day so I can't answer them all at once, I will try to answer them in the next few days.

Share this post


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

Share this post


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

Share this post


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

Share this post


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

 


You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan. I work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. There are so many questions every day so I can't answer them all at once, I will try to answer them in the next few days.

Share this post


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

 


You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan. I work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. There are so many questions every day so I can't answer them all at once, I will try to answer them in the next few days.

Share this post


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

 

Share this post


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

Share this post


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


You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan. I work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. There are so many questions every day so I can't answer them all at once, I will try to answer them in the next few days.

Share this post


Link to post
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).

Share this post


Link to post

Create an account or sign in to comment

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


×
×
  • Create New...