Jump to content

Change image on hover (Gallery gif -> mp4)

Recommended Posts

Hey !

On my website (erwanlier.com) I have a gallery (work). Whenever someone hover on one of my project I run a code that hides the image and in the background, a gif is playing. So when someone hover, they have a gif playing.

the code is written here: 

a.grid-item:hover img { 
	visibility: hidden;
}

.grid-item[href="/home/dhi-2022"] {
	background-image: url("https://static1.squarespace.com/static/5eedccbef70ff2565afd836e/t/65002af157ba1551a0f27331/1694509815813/DHI-ezgif-compression-15-12fps.gif");
	background-repeat: no-repeat;
	background-size: cover;
}



I would like to change the gif to an mp4 file ... but it's not working when I upload the mp4 instead of the gif and replace the link.

What code should I use? Thanks

Link to comment
  • Replies 1
  • Views 1.1k
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Posted Images

Hi, 

Video file won't work in background-image code, it will be more complex.

You can consider using plugin to make video appears in lightbox when hover image.

Or you can also use this code, it will require some efforts

#1. 

First, you need to find Portfolio items url

Hover on each Portfolio item > Click 3 dots > Settings

Portfolio Settings Min

You will see URL Slug

Portfolio Settings Url Slug Min

#2. Next, you need to get Video Direct URL

With Vimeo, you will need to use Paid Plan to able to get direct URL

With Youtube, no way to get this url, you need to download video then upload to Squarespace.

#3. Use this code to Portfolio Page Header Code Injection

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $('<video autoplay loop muted><source src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerEscapes.mp4" type="video/mp4"></video>').appendTo('a.grid-item[href="/photography/people-eb852-draft"] .grid-image-inner-wrapper');
  $('<video autoplay loop muted><source src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerJoyrides.mp4" type="video/mp4"></video>').appendTo('a.grid-item[href="/photography/interiors-dmhc5"] .grid-image-inner-wrapper');
});
</script>
<style>
a.grid-item[href="/photography/people-eb852-draft"] img, a.grid-item[href="/photography/interiors-dmhc5"] img {
  visibility: hidden;
  }
  .grid-image-inner-wrapper video {
    display: block !important;
    position: absolute !important;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
}
</style>

image.thumb.png.17e9019815e7b8a448b6586fe7e82ebc.png

#4. Explain

This code will add video to first portfolio item with url slug: /photography/people-eb852-draft

$('<video autoplay loop muted><source src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerEscapes.mp4" type="video/mp4"></video>').appendTo('a.grid-item[href="/photography/people-eb852-draft"] .grid-image-inner-wrapper');

This code will add video to second portfolio item with url slug /photography/interiors-dmhc5

$('<video autoplay loop muted><source src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerJoyrides.mp4" type="video/mp4"></video>').appendTo('a.grid-item[href="/photography/interiors-dmhc5"] .grid-image-inner-wrapper');

You can repeat the code & replace example videos with your video url

Portfolio Video2 Min

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!)

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.