Project grid image hover effect

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 !

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;
}

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 !

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?

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 !

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 

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;
}

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 !

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;
}

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