Jump to content

Swharton24

Circle Member
  • Posts

    9
  • Joined

  • Last visited

Swharton24's Achievements

  1. Hello! I added css to create custom overlay colors and hover text to my videos on the site, but now the videos won't play. When I click them, nothing happens. This is the css I used: /* Reels video overlay */ .video-caption-wrapper { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 100%; text-align: center; color: white; font-size: 16px; z-index: 50000; pointer-events: none; opacity: 0; transition: all 0.3s; } .video-block .intrinsic:after { content: ""; background-color: rgba(95,2,53,0.5); display: block; top: 0; left: 0; width: 100%; height: 100%; z-index: 20000; position: absolute; opacity: 0; transition: all 0.3s; } .video-block:hover .intrinsic:after { opacity: 1; transition: all 0.3s; } .video-block:hover .video-caption-wrapper { opacity: 1; transition: all 0.3s; } .gallery-grid-item-wrapper a:after { content: ""; background-color: rgba(95,2,53,.25) !important; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 9999; opacity: 0; transition: all 0.3s; } .gallery-grid-item-wrapper a:hover:after { opacity: 1; transition: all 0.3s; } figure.gallery-grid-item:hover * { color: white; font-size: 15px; font-family: 'Archivo Black' !important } .gallery-caption p{text-align:center !important} figcaption.gallery-caption.gallery-caption-grid-simple { position: absolute; left: 0; top: 0; right: 0; bottom: 0; display: flex; justify-content: center; align-items: center; z-index: 9999999999; transition: opacity ease 200ms !important; opacity: 0 !important; pointer-events: none; } figure:hover figcaption.gallery-caption.gallery-caption-grid-simple { opacity: 1 !important; } .gallery-caption-wrapper { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; }
  2. @tuanphan for some reason when I use this code, the overlay effect doesn't show up. The caption seems to be working fine. Any ideas? https://fish-nectarine-wbzr.squarespace.com/video-test pw: c?yNhS8>vmJd`YMA
  3. Yep! Here's the site and pw - thanks! https://fish-nectarine-wbzr.squarespace.com/ c?yNhS8>vmJd`YMA
  4. Site URL: https://fish-nectarine-wbzr.squarespace.com/reel I'd like to display video captions on hover instead of below the video. Is there a way to do this, perhaps with an overlay color so the captions are more visible? I'm attaching an example from another site. Thanks!
  5. Site URL: http://www.epochfilms.com How could I create a navigation bar like the one that appears on epochfilms.com on squarespace? I’m starting from scratch so open to any template and css solutions.
×
×
  • 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.