Hover over to play GIF in Squarespace 7.1 Gallery including clickthrough link with ability to use a universal filter

Hi there! 

Right now I have a portfolio with preloaded GIFs that are autoplaying that I would like to instead play on hover. Additional functionality I am looking for includes making the portfolio searchable (I realize these are two different requests, I just don't want conflicting code). I am new to coding and would appreciate any and all help! Thank you so much!

@tuanphan

#2. Possible

Something like this?

https://thung.squarespace.com/portfolio-filter?noredirect

pass: abc

#1. Can you share link to your site?

@tuanphan Hi there! Thank you so much for responding! Yes, like that example, except with a text overlay that also plays a GIF when hovering over the image (instead of autoplay) and has the ability to be tagged and filtered. I am looking for the design of the "Our Work V2 Experiment" page with the functionality of the "Our Work" page/ a portfolio template on the website. I am hoping to create the V2 Experiment without as much CSS so it is easier to change content down the line and also add a filter plugin. Again, thank you so much!

The Website: https://caribou-smilodon-6l25.squarespace.com/

password: abc

Similar functionality to this website: https://www.steptstudios.com/

@tuanphan Hi again! Just checking in to see if perhaps you have found a solution? Thank you so much! You have the best code on here!

Here I used Filter Plugin (referral link)

• Text Overlay: Possible with CSS
• Gif: Yes. Possible. Use CSS to change each image to gif on hover
• has the ability to be tagged and filtered >> Can you describe this?

@tuanphan What is the CSS that allows for the gif to play on hover? Can the media stay in the portfolio gallery? 

On 3/7/2023 at 1:13 AM, tierneyc said:

@tuanphan What is the CSS that allows for the gif to play on hover? Can the media stay in the portfolio gallery? 

Can you send a gif file? I will give you example code.

Also where is Work page, Now I can't find it in Header menu

@tuanphan  Thank you for responding! The work page and the V2 Work page are both in the header (V2 is the style we want but preferably with the Squarespace template that Our Work uses), I apologize for the confusion. I have attached an example GIF file. 

https://caribou-smilodon-6l25.squarespace.com/ourwork

Add to Design > Custom CSS. This code for first item

a.grid-item[href="/ourwork/lsssizzle-mfybl"]:hover img {
    content: url(https://content.invisioncic.com/p289038/monthly_2023_03/2021LongStoryShortSizzle-high.gif.436c6863965855afc1ee3c087b82277c.gif);
}

/ourwork/lsssizzle-mfybl is project url

Thank you so much! Is it possible to have settings for mobile?

On 3/13/2023 at 9:09 PM, tierneyc said:

Thank you so much! Is it possible to have settings for mobile?

 

You mean replace to another gif on mobile or?

Is it possible to have it be a single tap to play the gif and then another tap on mobile for the clickthrough link? 

On 3/23/2023 at 12:36 AM, tierneyc said:

Is it possible to have it be a single tap to play the gif and then another tap on mobile for the clickthrough link? 

Hi,

I don't know this

Hi @tuanphan I am also trying to figure out how to make my homepage images only play when hovered. Could you explain how I need to go about doing this in Square space? I can send u my website. I just want the images to be still until you hover over with curser. thank you

my portfolio

https://www.nickgardnerportfolio.com/

what I want it to do

https://www.steptstudios.com/

5 hours ago, nickgardner400 said:

Hi @tuanphan I am also trying to figure out how to make my homepage images only play when hovered. Could you explain how I need to go about doing this in Square space? I can send u my website. I just want the images to be still until you hover over with curser. thank you

my portfolio

https://www.nickgardnerportfolio.com/

 

what I want it to do

https://www.steptstudios.com/

Ideal here is hover on each item >> replace current image with a gif or video (with code)

If you have 19 items, we will need 19 code

If you still want to do this, let me know, we can give the code

@tuanphan yes, that would be wonderful! do the gif need to have a url?

Hi I also need help with how to do this same coding. 

4 hours ago, MichelleSandler said:

Hi I also need help with how to do this same coding. 

 

Add to Design > Custom CSS

a.grid-item .grid-image-inner-wrapper {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    transition: all 0.3s ease;
}
a.grid-item:hover .grid-image-inner-wrapper img {
    opacity: 0;
    transition: all 0.3s ease;
}
a.grid-item .grid-image-inner-wrapper img {
    transition: all 0.3s ease;
}
a.grid-item:nth-child(1) .grid-image-inner-wrapper {
    background-image: url(https://images.squarespace-cdn.com/content/5ffc7fcb6bbc7c3452a02a51/40f786c3-b0b5-4f89-9cdc-67588a42be77/MWF2.gif);
}
a.grid-item:nth-child(2) .grid-image-inner-wrapper {
    background-image: url(https://images.squarespace-cdn.com/content/5ffc7fcb6bbc7c3452a02a51/1661782657732-F1MC8XFCK78K57X6J8JR/NISSAN+MAGNITE-high.gif);
}
a.grid-item:nth-child(3) .grid-image-inner-wrapper {
    background-image: url(https://images.squarespace-cdn.com/content/5ffc7fcb6bbc7c3452a02a51/8a9879b6-ad11-4c12-904a-fa046332cfcc/I+Shape+My+World+-+Zuleika+Patel.gif);
}
a.grid-item:nth-child(4) .grid-image-inner-wrapper {
    background-image: url(https://images.squarespace-cdn.com/content/5ffc7fcb6bbc7c3452a02a51/24194dd9-6fba-406a-a7c2-dff860426a85/120+Years+of+Quality+%26+Style.gif);
}
a.grid-item:nth-child(5) .grid-image-inner-wrapper {
    background-image: url(https://images.squarespace-cdn.com/content/5ffc7fcb6bbc7c3452a02a51/0d7ae118-ca52-497f-ac43-29d2a06219e0/adidas+Continental+80.gif);
}

Hey there,

I want to do about the same thing : having a different GIF to play when hovering each image of the gallery.

My website : https://camillemarotte.com/
About the same reference : https://www.steptstudios.com/

Cheers,

Ha no worries I found the solution using the code you provided in the end 😉

@tuanphan hello can you help me with my problem I also have similar problem but I can't found a solution

On 8/13/2023 at 9:56 PM, xtianisabsent said:

@tuanphan hello can you help me with my problem I also have similar problem but I can't found a solution

Can you share link to page where you have problem?

On 4/16/2023 at 3:21 PM, tuanphan said:

Add to Design > Custom CSS

a.grid-item .grid-image-inner-wrapper {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    transition: all 0.3s ease;
}
a.grid-item:hover .grid-image-inner-wrapper img {
    opacity: 0;
    transition: all 0.3s ease;
}
a.grid-item .grid-image-inner-wrapper img {
    transition: all 0.3s ease;
}
a.grid-item:nth-child(1) .grid-image-inner-wrapper {
    background-image: url(https://images.squarespace-cdn.com/content/5ffc7fcb6bbc7c3452a02a51/40f786c3-b0b5-4f89-9cdc-67588a42be77/MWF2.gif);
}
a.grid-item:nth-child(2) .grid-image-inner-wrapper {
    background-image: url(https://images.squarespace-cdn.com/content/5ffc7fcb6bbc7c3452a02a51/1661782657732-F1MC8XFCK78K57X6J8JR/NISSAN+MAGNITE-high.gif);
}
a.grid-item:nth-child(3) .grid-image-inner-wrapper {
    background-image: url(https://images.squarespace-cdn.com/content/5ffc7fcb6bbc7c3452a02a51/8a9879b6-ad11-4c12-904a-fa046332cfcc/I+Shape+My+World+-+Zuleika+Patel.gif);
}
a.grid-item:nth-child(4) .grid-image-inner-wrapper {
    background-image: url(https://images.squarespace-cdn.com/content/5ffc7fcb6bbc7c3452a02a51/24194dd9-6fba-406a-a7c2-dff860426a85/120+Years+of+Quality+%26+Style.gif);
}
a.grid-item:nth-child(5) .grid-image-inner-wrapper {
    background-image: url(https://images.squarespace-cdn.com/content/5ffc7fcb6bbc7c3452a02a51/0d7ae118-ca52-497f-ac43-29d2a06219e0/adidas+Continental+80.gif);
}

 

Where exactly do I place this in my CSS?

On 10/24/2023 at 8:03 AM, Apiata said:

Where exactly do I place this in my CSS?

 

Top or bottom of CSS box. Remember to save all code somewhere, just for backup