Jump to content

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

Recommended Posts

Posted

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!

Screen Shot 2023-02-21 at 3.58.09 PM.png

Posted (edited)

@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/

 

Edited by tierneyc
Posted
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

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Posted

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

 

2021 Long Story Short Sizzle-high.gif

Posted

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

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

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

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

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

 

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

  • 4 weeks later...
  • 2 months later...
  • 2 months later...
Posted (edited)
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?

 

Edited by Apiata
Where exactly do I place this in my Custom CSS?

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.