Jump to content

Project grid image hover effect

Recommended Posts

Site URL: https://www.erwanlier.com/works

Hello !

On my website, on the work page (https://www.erwanlier.com/works) when you hover image/project, there is currently a title and a quick fade in with opacity at 0.5 (basic feature).
What would be the code to change that hover effect into putting the title at the bottom center, and no opacity change but a zoom in the image (something like img{transform: scale(1.3); transition: .3s;}).  With hidden overflow.

Thank you very much ! I have found multiple code, but none of them seems to work on my website, so I must be doing something wrong !

Link to comment
  • Replies 9
  • Created
  • Last Reply

Top Posters In This Topic

On 4/11/2021 at 4:11 PM, Erwan said:

Site URL: https://www.erwanlier.com/works

Hello !

On my website, on the work page (https://www.erwanlier.com/works) when you hover image/project, there is currently a title and a quick fade in with opacity at 0.5 (basic feature).
What would be the code to change that hover effect into putting the title at the bottom center, and no opacity change but a zoom in the image (something like img{transform: scale(1.3); transition: .3s;}).  With hidden overflow.

Thank you very much ! I have found multiple code, but none of them seems to work on my website, so I must be doing something wrong !

Hi. Add to Design > Custom CSS

/* Portfolio grid hover */
.grid-item:hover .portfolio-overlay {
    opacity: 0 !important;
}
.grid-item:hover .portfolio-text {
    justify-content: flex-end !important;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

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
  • 3 weeks later...

Thanks for the help, worked great with some tweaks !

 

.grid-item:hover .grid-image{
    opacity: 1 !important;
  	transform: scale(1.1);
    transition: 3s;
}

.grid-item {
  overflow: hidden !important;
}

.grid-item:hover .portfolio-text {
    justify-content: flex-end !important;
  opacity: 0 !important;
}

Is the a way, to add a text each time I hover the grid item, a different one from the title ? When I hover image I would like a text to appear ( fade-in/swipe up) at the bottom of the grid image with "watch more" ! Something like

.grid-item: hover {

content : "watch more";

centered-middle-bottom;

transition : swipe-up;

}

Thanks for the help !

Link to comment
20 hours ago, Erwan said:

Thanks for the help, worked great with some tweaks !

 


.grid-item:hover .grid-image{
    opacity: 1 !important;
  	transform: scale(1.1);
    transition: 3s;
}

.grid-item {
  overflow: hidden !important;
}

.grid-item:hover .portfolio-text {
    justify-content: flex-end !important;
  opacity: 0 !important;
}

Is the a way, to add a text each time I hover the grid item, a different one from the title ? When I hover image I would like a text to appear ( fade-in/swipe up) at the bottom of the grid image with "watch more" ! Something like

.grid-item: hover {

content : "watch more";

centered-middle-bottom;

transition : swipe-up;

}

Thanks for the help !

This same text or all items, or each item = different text?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

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 weeks later...
On 5/1/2021 at 9:46 AM, tuanphan said:

This same text or all items, or each item = different text?

The easiest would be same text for all items, but I don't mind having to type the same text for each if it's easier ! But I don't want it to be the title because then, at the end of the page dedicated, I will only have link saying "watch more".

Thanks !

Link to comment
  • 2 weeks later...
On 4/15/2021 at 8:45 AM, tuanphan said:

Hi. Add to Design > Custom CSS


/* Portfolio grid hover */
.grid-item:hover .portfolio-overlay {
    opacity: 0 !important;
}
.grid-item:hover .portfolio-text {
    justify-content: flex-end !important;
}

 

And is there a way, so after I hover it goes back smoothly to the original size and not directly. Something like an after hover transition, zoom out to normal smoothly.

Thanks 

Link to comment
17 hours ago, Erwan said:

And is there a way, so after I hover it goes back smoothly to the original size and not directly. Something like an after hover transition, zoom out to normal smoothly.

Thanks 

Use this

/* Portfolio grid hover */
.grid-item .portfolio-overlay {
	transition: all 0.3s;
}
.grid-item:hover .portfolio-overlay {
    opacity: 0 !important;
	transition: all 0.3s;
}
.grid-item:hover .portfolio-text {
    justify-content: flex-end !important;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

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

This is not working or I mis-explained what I would like. Right now on erwanlier.com/works when you over each image there is a zoom in effect. Here is the code that make it happen :

/* Portfolio grid hover */
.grid-item:hover .grid-image{
    opacity: 1 !important;
      transform: scale(1.1);
    transition: all 3s;
}

.grid-item {
  overflow: hidden !important;
}

But as soon as the mouse is out of the image it instantly goes to scale 1. I would like it to go back to scale 1 (from 1.1) as smooth as when I hover it.

Thanks !

Link to comment

Try new code

/* Portfolio grid hover */
.grid-item:hover .grid-image{
    opacity: 1 !important;
      transform: scale(1.1);
    transition: all 3s;
}

.grid-item {
  overflow: hidden !important;
    transition: all 3s;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

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
  • 1 month later...
On 5/21/2021 at 4:43 PM, tuanphan said:

Try new code


/* Portfolio grid hover */
.grid-item:hover .grid-image{
    opacity: 1 !important;
      transform: scale(1.1);
    transition: all 3s;
}

.grid-item {
  overflow: hidden !important;
    transition: all 3s;
}

 

I don't know what I'm doing wrong but it does not work ...

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...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.