Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search

Search the Community

Showing results for tags 'gif'.

More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • Forum
    • News and Announcements
    • Getting Started With Squarespace
    • Coding and Customization
    • Commerce
    • Feedback on Your Site
    • Images and Videos
    • Pages and Content
    • SEO and Marketing
    • Site Design and Styles
  • Colorado Designers's Topics
  • Squarespace Forum Club Guidelines's Topics
  • Austin, TX Designers's Club Discussion
  • New York City Designers's Club Discussion
  • Berlin Designers's Club Discussion
  • SEO Experts's Club Discussion
  • Photographers's Club Discussion
  • Graphic Designers's Topics
  • London Designers's Topics
  • Podcasters's Club Discussion
  • Custom Coding Help's Club Discussion
  • Atlanta, GA Designers's Topics
  • Seattle, WA Designers's Topics
  • San Diego, CA Designers's Topics
  • Dallas, TX Designers's Topics
  • Australia Designers's Club Discussion
  • Minnesota Designers's Topics
  • Minnesota Designers's Topics
  • Copywriters's Topics
  • France Designers 🇫🇷's Topics
  • France Designers 🇫🇷's Topics
  • Portland, OR Designers's Topics
  • Canadian Website Designers's Club Discussion
  • Los Angeles Designers & Devs's Club Discussion
  • South African Designers's Club Discussion
  • Brazil Designers's Club Discussion
  • Developers's Club Discussion

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start



About Me




Expert ID

Found 21 results

  1. Site URL: http://www.alphamalevisuals.com/music-videos http://www.alphamalevisuals.com/music-videos On my website, I currently use an image block as a thumbnail for my music videos. They click the thumbnail and it takes them to the page to watch the music video. Upon hovering (or rollover) over the image block, I'd like for it to swap to play a .GIF when hovering over it. Or maybe play a small video clip if possible? I've looked on the forums and seen other people ask similar questions. Some said something about custom CSS but when I try to copy and paste that code, it does not work for me and I'm not sure what I'm doing wrong. Can anyone help?
  2. Site URL: https://jackshugruedesign.com Hi I have the SUHAMA template and I would like to know if it's possible to replace a word from a text box with a gif. The gif would be various words of roughly the same size as the word from the text box that would be positioned in the same spot as the word from the text box and would cycle endlessly. The word I would like to replace is "Integrative" on the homepage at the top. I've linked my website above for reference and added a video below for reference to the work I am trying to achieve, and of course this video would be in GIF form and play endlessly. Thanks! GIF.mp4
  3. Site URL: https://www.jeulianne.com/portfolio Hello everyone, I am a beginner at coding. In my website, I have multiple short clips that automatically play and loop; they basically act like gifs. I achieved this by using code blocks. There is also a link inserted in each block for viewers to redirect to the full video. This is an example of the code I have for one of my code blocks: <a href="link here" target="_blank"> <video class="video" width="100%" height="100%" autoplay loop playsinline> <source src="s/video.mp4" type="video/mp4"> <source src="s/video.webm" type="video/webm"> Sorry, your browser doesn't support HTML5 video. </video> <div class="overlay"> <div class="text"> <h3 class="text h3">The Secret Kingdom</h3> </div> </div> </a> In my Custom CSS, I added a hover effect for the code blocks, so viewers can hover their mouse cursor over the clips and click on them. I was able to achieve the black fade in and fade out transitions smoothly, but I can't seem to center the text properly. The position of the text appears differently in different devices. This is the code I have so far: /* ----- Block Hover ----- */ #block-yui_3_17_2_1_1589451992993_20908, #block-yui_3_17_2_1_1589450893966_20367, #block-yui_3_17_2_1_1589447618241_19753, #block-yui_3_17_2_1_1589447618241_20564, #block-yui_3_17_2_1_1589448047699_19059 { display: block; position: relative; width: auto; } #block-yui_3_17_2_1_1589451992993_20908 .video, #block-yui_3_17_2_1_1589450893966_20367 .video, #block-yui_3_17_2_1_1589447618241_19753 .video, #block-yui_3_17_2_1_1589447618241_20564 .video, #block-yui_3_17_2_1_1589448047699_19059 .video { width: 100%; height: 100%; } #block-yui_3_17_2_1_1589451992993_20908 .overlay, #block-yui_3_17_2_1_1589450893966_20367 .overlay, #block-yui_3_17_2_1_1589447618241_19753 .overlay, #block-yui_3_17_2_1_1589447618241_20564 .overlay, #block-yui_3_17_2_1_1589448047699_19059 .overlay { position: absolute; top: 0; bottom: 0; left: 0; right: 0; width: 100%; opacity: 0; transition: .3s ease; background-color: #000000; } #block-yui_3_17_2_1_1589451992993_20908:hover .overlay, #block-yui_3_17_2_1_1589450893966_20367:hover .overlay, #block-yui_3_17_2_1_1589447618241_19753:hover .overlay, #block-yui_3_17_2_1_1589447618241_20564:hover .overlay, #block-yui_3_17_2_1_1589448047699_19059:hover .overlay { opacity: 0.85; } #block-yui_3_17_2_1_1589451992993_20908 .text, #block-yui_3_17_2_1_1589450893966_20367 .text, #block-yui_3_17_2_1_1589447618241_19753 .text, #block-yui_3_17_2_1_1589447618241_20564 .text, #block-yui_3_17_2_1_1589448047699_19059 .text { position: absolute; padding-top: 50%; left: 50%; width: 100%; text-align: center; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } #block-yui_3_17_2_1_1589451992993_20908 .text h3, #block-yui_3_17_2_1_1589450893966_20367 .text h3, #block-yui_3_17_2_1_1589447618241_19753 .text h3, #block-yui_3_17_2_1_1589447618241_20564 .text h3, #block-yui_3_17_2_1_1589448047699_19059 .text h3 { color: #FFFFFF; height: 100%; width: 100%; font-weight: 500; letter-spacing: 3px; text-transform: uppercase; } I'd appreciate some help on how to fix this. Are there any ways I can improve my code too? Thank you in advance!
  4. Site URL: https://firstseriescreative.com Hi everyone, Thank you for your time for this. Site: firstseriescreative.com Problem: The Scroll Down Indicator Gif (an image block) on the First Section of my Home page and About page are way too big on mobile version. Is there anyway that I can resize that for mobile with Custom CSS. Below is a screenshot. Many thanks and appreciate your time and help!
  5. Site URL: https://www.handford.com/ Hi, My gif is resizing for mobile version of site on these pages: https://www.handford.com/imaging https://www.handford.com/creative I've tried adding this code but doesn't seem to be doing the trick: <style> @media screen and (max-width:640px) { .homepage .section-background image { width: 100% !important; height: auto !important; } </style> Also would like to decrease the padding around the text in between the gif and the photo beneath. Thanks in advance!
  6. Site URL: http://www.jimmadden.ca/motiongraphics Hello all, First time asking on here, but I cant for the life of me figure this one out. I have a page of gifs I have converted from .mov files to show some animation, but there is so many of them I would ideally like to have a static image (possibly with text about the client or something) then when you hover over each one, have that gif animation start. I feel like this would help speed up the browsing experience on this page, any help on this would be greatly appreciated! Using the Jasper Template. - Jim
  7. Hello! I'm curious to see how you have used moving gifs on Squarespace 7.1 and have you had any problems on viewing on mobile devices those? I'm planning on making a team page that would have all the team-members goofing around in small gifs. So if you have used gif / gifs on your Squarespace 7.1 I'd love to see, send a link please! 🌿 Thanks! Best, Kerttu
  8. Site URL: https://jackshugruedesign.com/work Hi all, I was wondering if it's possible to make a particular word be on an endless loop of changing fonts and word change. For instance on my website homepage: https://jackshugruedesign.com - I would love for the word "interactive" from the "Hi, I'm Jack, an interactive designer in the San Francisco Bay Area" to be on a loop of a set number of different words that it would change between. These words would be "motion", "visual", "narrative", "fun", "UI/UX", "experience", "creative", and they would all ideally be unique fonts and perhaps even different colors. I use the SUHAMA template and can provide any other information necessary to bring this idea to life! Thanks!
  9. Hi, I need some help with a hover effect for video. I'd like to achieve the hover animation effect like on youtube or this site: https://www.visuals-internationals.com/ Ideally I'd like the thumbnail to be a still image, as you hover over, it turns in to a gif, and reverts back to still image when the cursor is moved. I'd like to use this in a gallery as well as a standalone video. Any help is appreciated. Thanks.
  10. Site URL: https://gdvfx.net/ Hello, I've found som instructions on embedding gfycat videos or gifs to my site, but haven't been able to get it working. I am a coding novice, so I'm likely doing something wrong. The instructions found here: https://github.com/gfycat/gfycat.js state to enter this code right after the opening <body> tag: <script> (function(d, s, id){ var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) {return;} js = d.createElement(s); js.id = id; js.src = "https://assets.gfycat.com/gfycat.js"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'gfycat-js')); </script> Then to include an embed tag: <div class="gfyitem" data-title=true data-autoplay=false data-controls=true data-id="BestYellowishElephantseal"></div> So what I've tried is selecting the settings gear on the page I'd like to add the embed to, go to advanced and entered the code into the 'Page header code injection' Then I tried to add both a code block and an embed block with the above example embed tag with no luck. What am I doing wrong? Any help woudl be greatly appreciated! - Glenn
  11. Site URL: https://www.animatedcompany.com/ If anyone knows how to do this, I'd be super grateful for your help as I've looked this up on multiple forums and haven't found anything. I'm not much of a coder so I'm at a loss on how to solve this issue on my own. I have a gallery with images that currently animate when the mouse rolls over them. Right now when the mouse rolls over the image the image is replaced with an animated gif, which I've uploaded to an unlinked page on the site and referenced in the code. However, I've realized that the gifs are too large in size and therefore they don't play instantly when the user first loads the page and hovers over the image, which isn't ideal. I could potentially downgrade the gifs even further in quality so as to make the files smaller and load faster, but I was reading about the possibility of using mp4s instead of gifs which will supposedly cut down on file sizes while maintaining quality. So what I want to do is have my code reference an mp4 instead of a gif. The issue is that to my knowledge squarespace doesn't allow video hosting, which means I have to reference the mp4s as an embedded video - and that's where things have become complicated and I'd love for someone to help tell me what I'm doing wrong. I'm using vimeo as my video host, but I'm not sure how to get the code to recognize the vimeo video. The original code was created by Bernard West here on the squarespace forums, many thanks to him for providing this code: <script> (function() { var imgs = document.getElementsByTagName('img'); var vid = document.getElementsByTagName('vimeo-player'); for (var i = 0, n = imgs.length; i < n; i++) { if (imgs.getAttribute("data-image") == "https://images.squarespace-cdn.com/content/v1/5eaae124f74e885ed43ef119/1588348053720-MHHY5K1N9GUZDMRAVCV3/ke17ZwdGBToddI8pDm48kPH0MW_dKDKQQniayBjje0l7gQa3H78H3Y0txjaiv_0fDoOvxcdMmMKkDsyUqMSsMWxHk725yiiHCCLfrh8O1z5QPOohDIaIeljMHgDF5CVlOqpeNLcJ80NK65_fV7S1Uag6dNbkhZ3NTHwlF9AMtOyYWHubiA6WOrblBwnw5MIcZDqXZYzu2fuaodM4POSZ4w/Pepsi+Thumb+v02.png") { imgs.setAttribute("id", "targetIMG"); imgs.addEventListener("mouseover", newImage); imgs.addEventListener("mouseout", oldImage); break; } } })(); function newImage() { var img = document.getElementByID("iframe"); img.getAttributeNode("src").value = "https://player.vimeo.com/video/414211714?autoplay=1&loop=1&title=0&byline=0&background=1&portrait=0\" style=\"position:absolute;top:0;left:0;width:100%;height:100%;\" frameborder=\"0\" allow=\"autoplay; fullscreen\" allowfullscreen"; } function oldImage() { var img = document.getElementById("targetIMG"); img.getAttributeNode("src").value = "https://images.squarespace-cdn.com/content/v1/5eaae124f74e885ed43ef119/1588348053720-MHHY5K1N9GUZDMRAVCV3/ke17ZwdGBToddI8pDm48kPH0MW_dKDKQQniayBjje0l7gQa3H78H3Y0txjaiv_0fDoOvxcdMmMKkDsyUqMSsMWxHk725yiiHCCLfrh8O1z5QPOohDIaIeljMHgDF5CVlOqpeNLcJ80NK65_fV7S1Uag6dNbkhZ3NTHwlF9AMtOyYWHubiA6WOrblBwnw5MIcZDqXZYzu2fuaodM4POSZ4w/Pepsi+Thumb+v02.png"; } </script> Currently nothing happens when you hover over the Pepsi image on the site.
  12. Hi, Anyone know the code for adding a pre-loader for an animated gif? And do we still even need one?
  13. Site URL: https://bagpipe-heptagon-lcez.squarespace.com hello, Is there any way to get the gif rounded css code or edit somehow ? my gif name : ezgif.com-crop.gif Thank you !!
  14. Site URL: https://www.hi-noon.net Hi everyone! I'm trying to insert a clickable sticker / badge (a .gif on transparent background) into the upper right corner of the website (in the header). Please see the image attached. After clicking the image it would link to another page. Ideally it would only appear on the homepage, however if not possible it can be visible on all pages. Any help would be hugely appreciated! Thank you
  15. Hi, ive animated in photoshop a bunch of testimonials that I just wanted to run in a loop in a section on my page (as if it were a background video) but it doesn’t seem to upload. Can I only upload video? how do I get around this?
  16. Site URL: http://www.andyancreative.co/work-2 Hello! I need help writing code to restart a gif on hover within the index thumbnails. I'm working on my portfolio and the block I'm trying to target is the logo collection block on http://www.andyancreative.co/work-2 (second row on the right). I have the image changing to a gif on hover but would like the gif to restart every time when you're hovering over it. I'm not sure css code or javascript is needed but thanks in advance!
  17. Hello! I embedded a giphy link to my page - https://media.giphy.com/media/emGDFPPBd56FExSUEt/giphy.gif Every time you hover over the gif on the page the giphy logo pops up. (see photo attached) and If you click, it opens up a page to my giphy account. I would like to know if its possible to disable click-through to the giphy website. I would like the gif to have NO click-through therefore not taking viewers away from the page/site. Could this be possible with code? If there is a better way to do this without giphy im open to hear any suggestions. TIA!
  18. Hi, I'm building a portfolio site within the Native template and I'd love to make the thumbnail images for my videos into gifs. Is anyone able to advise how I might be able to do this? The only way I know how to make gifs is via giphy fyi! Thanks
  19. I'm looking to add a gif when you hover over text on my site like this https://caterinabianchini.com/
  20. Anyone know how to add a gif to a heading tag? I want my heading to have a gif background
  21. Hey, I'm working on a site where on the mainpage I have gifs inserted into the 'page setting -> media' so that when people click the gif it takes them to the corresponding page The gifs look good when viewing on mobile, but when I open on desktop they stretch (I have text on them that gets cut off) Is there a way to maintain image size between the 2 modes?
  • Create New...