Highlighted

On hover: change image opacity + text fade in and slide up

Community Beginner ,
May 16, 2017

Copy link to clipboard

Copied

Hi,

I’m searching for a hover effect, similar to the effect on following page (http://www.madebysix.com/projects/).

Whenever you hover over an image 2 things happen:

-         - Opacity of the image changes to white

          - Text is fading in and sliding up (translatey?)

I’ve tried several widgets and combined several possibilities, but none of them result in the effect described above.

Does anyone has some suggestion how I can achieve this effect?

This website also has a cool page transition. When you click on a project you get a page down, followed by the display of a title, followed by the page itself. To achieve this effect, I was thinking to use a redirect. But maybe there are other/better options? Any suggestions or tips?

Thanks a lot.

Kind regards,

Bart

It looks like the developers of the site have used custom JavaScript to create the rollover effect. If the widgets are not working for you, you might want to look for JavaScript codes on the Internet that work. However, if you are not proficient with coding, I suggest tweaking any of the widgets to come up with something that resembles this behavior closely.

I am hoping that the other experts here have a better suggestion that I missed.

Thanks,

Preran

Views

401

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

On hover: change image opacity + text fade in and slide up

Community Beginner ,
May 16, 2017

Copy link to clipboard

Copied

Hi,

I’m searching for a hover effect, similar to the effect on following page (http://www.madebysix.com/projects/).

Whenever you hover over an image 2 things happen:

-         - Opacity of the image changes to white

          - Text is fading in and sliding up (translatey?)

I’ve tried several widgets and combined several possibilities, but none of them result in the effect described above.

Does anyone has some suggestion how I can achieve this effect?

This website also has a cool page transition. When you click on a project you get a page down, followed by the display of a title, followed by the page itself. To achieve this effect, I was thinking to use a redirect. But maybe there are other/better options? Any suggestions or tips?

Thanks a lot.

Kind regards,

Bart

It looks like the developers of the site have used custom JavaScript to create the rollover effect. If the widgets are not working for you, you might want to look for JavaScript codes on the Internet that work. However, if you are not proficient with coding, I suggest tweaking any of the widgets to come up with something that resembles this behavior closely.

I am hoping that the other experts here have a better suggestion that I missed.

Thanks,

Preran

Views

402

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
May 16, 2017 0
Adobe Employee ,
May 18, 2017

Copy link to clipboard

Copied

It looks like the developers of the site have used custom JavaScript to create the rollover effect. If the widgets are not working for you, you might want to look for JavaScript codes on the Internet that work. However, if you are not proficient with coding, I suggest tweaking any of the widgets to come up with something that resembles this behavior closely.

I am hoping that the other experts here have a better suggestion that I missed.

Thanks,

Preran

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 18, 2017 0
Community Beginner ,
May 19, 2017

Copy link to clipboard

Copied

Thank you Preran for looking into this issue. We will keep searching for a similar approach.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 19, 2017 0