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

HeartAndDash

Member
  • Content Count

    16
  • Joined

  • Last visited

Recent Profile Visitors

The recent visitors block is disabled and is not being shown to other users.

  1. I got it the way I want it! To see this code in action, see Heart & Dash Portfolio. If you want this code to work, do not use an image grid. Instead, create your own 'grid' by simply inserting multiple image blocks. You'll insert this code by going to "Design" then "Custom CSS": .image-caption-wrapper { opacity: 0; text-align: center !important; top: 0 !important; position: relative; pointer-events: none !important; } &:hover, &:focus { opacity: 1; } .image-caption { left: 50%; position: absolute; top: 50%; width: 100%; -webkit-transform: translate(-50%,-50%); -ms
  2. I am using the Bedford template and I would like to change the "caption overlay on hover" feature so that the overlay covers the whole image, the whole image is clickable, and I can customize the colors of text and the overlay itself. The default "caption overlay on hover" style is a small transparent gray bar that overlays the very bottom of the image. I searched everywhere for a cohesive snippet of custom CSS code, and while there are several partial answers, I have yet to see something that covers all of my wish list. I'll keep tinkering and report back!
  3. To see this code in action, see Heart & Dash Portfolio. Okay, so I decided to keep tinkering because I wasn't completely satisfied with the level of customization in the code I provided before. Below, I'm pasting code for another way to do it. This way does not include a gallery or image grid at all. Rather, it is code that will alter the way "on-hover" captions appear for individual images. So, if you want this code to work, create your own 'grid' by simply inserting multiple image blocks. You'll insert this code by going to "Design" then "Custom CSS": .image-caption-wrapper { opacit
  4. Thanks for the kind words, Clara! I wasn't totally satisfied with the solution above, so I'm posting another option below. Also, congrats and have fun with your wedding planning!!
  5. Hmmm. There is one step I did not include in my instructions, and maybe that's the key. I started by creating a hidden gallery page that I titled "Portfolio Gallery." There, I uploaded all the images I knew I'd eventually want on my main my portfolio page. Via that hidden "Portfolio Gallery" page, I added a click-through link to each image. To do this, you go in to edit your gallery page, hover over each image in the left-side dashboard, click the gear, then click the 'options' tab, then type in the click-through URL. Then I created that portfolio page. I inserted a gallery block, which prom
  6. I posted an answer to a similar question here. I provided code for changing the opacity of gallery grid images upon hover while also displaying the image title centered and at full opacity on hover. To see a sample of my code in use, check out my site.
  7. I posted an answer to a similar question here. I provided code for changing the opacity of gallery grid images upon hover while also displaying the image title centered and at full opacity on hover. To see a sample of my code in use, check out my site.
  8. If you want this treatment to work across all gallery grid blocks throughout your squarespace site, this is the solution I used. It creates a hover-effect for the image (the image changes from 100% opacity to 10% opacity upon rollover) and the titles for the images appear on hover (centered in the middle of the block). You can see a sample on my website here. To use this code, simply go to "Design" then "Custom CSS" then drop in the following code: ---------- .sqs-gallery-block-grid .slide .margin-wrapper:hover a.image-slide-anchor { opacity: .1; -webkit-transition: opacity .3s ease-
×
×
  • Create New...