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-transform: translate(-50%,-50%); transform: translate(-50%,-50%); } .image-caption p { font-size: 18px !important; font-weight: semibold !important; color: #ea4e4c !important; text-transform: uppercase; line-height: 120% !important; letter-spacing: 2px !important; opacity: 1 !important; } .sqs-block.sqs-block-editable:not(.sqs-block-editing) .sqs-dd-invalid-handle { cursor: default; pointer-events: all !important; } .sqs-block-image .image-block-outer-wrapper.layout-caption-overlay .intrinsic .image-caption-wrapper .sqs-block-image .image-block-outer-wrapper.layout-caption-overlay-hover .intrinsic .image-caption-wrapper { background: #fddcce; opacity: .9; } The nice thing about this is that you can customize the color of the caption/type (I used #ea4e4c) that appears on hover and you can also customize the color of the background (I used #fddcce). You can customize those hex color codes for yourself. For me, this is a total solution!
  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 { 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-transform: translate(-50%,-50%); transform: translate(-50%,-50%); } .image-caption p { font-size: 18px !important; font-weight: semibold !important; color: #ea4e4c !important; text-transform: uppercase; line-height: 120% !important; letter-spacing: 2px !important; opacity: 1 !important; } .sqs-block.sqs-block-editable:not(.sqs-block-editing) .sqs-dd-invalid-handle { cursor: default; pointer-events: all !important; } .sqs-block-image .image-block-outer-wrapper.layout-caption-overlay .intrinsic .image-caption-wrapper .sqs-block-image .image-block-outer-wrapper.layout-caption-overlay-hover .intrinsic .image-caption-wrapper { background: #fddcce; opacity: .9; } The nice thing about this is that you can customize the color of the caption/type (I used #ea4e4c) that appears on hover and you can also customize the color of the background (I used #fddcce). You can customize those hex color codes for yourself. The other nice thing about this as that the entire square is clickable. The code I provided yesterday did have an issue where only the upper half of the box was clickable. For me, this is a total solution!
  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 prompted me to choose "Upload Media" or "Use Existing Gallery." I chose "Use Existing Gallery" and then selected the "Portfolio Gallery" I had already prepared with click-through links.
  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-in-out; transition: opacity .3s ease-in-out; -moz-transition: opacity .3s ease-in-out; -o-transition: opacity .3s ease-in-out; -ms-transition: opacity .3s ease-in-out; } .sqs-gallery-block-grid .slide .margin-wrapper .image-slide-title { display: block; position: absolute; top: 110px; right: 0; bottom: 0; left: 0; padding: 2em; -webkit-transition: all .3s ease-out; -moz-transition: all .3s ease-out; -o-transition: all .3s ease-out; -ms-transition: all .3s ease-out; transition: all .3s ease-out; margin-bottom: 0px !important; } .sqs-gallery-block-grid .slide .margin-wrapper .image-slide-title { color: #273845; opacity: 0; text-transform: uppercase; font-size: 18px; line-height: 125%; letter-spacing: 2px; margin-bottom: 240px; } .sqs-gallery-block-grid .slide .margin-wrapper:hover .image-slide-title { color: #273845; opacity:1; text-transform: uppercase; vertical-align: middle; font-size: 18px; line-height: 125%; letter-spacing: 2px; margin-bottom: 240px; } @media only screen and (max-width: 400px) { .sqs-gallery-block-grid .slide .margin-wrapper:hover .image-slide-title { color: transparent; opacity: 0; } } ---------- The last bit of code hides the hover text for mobile screens since the grid gets too small to accommodate the text without it looking wonky. The opacity affect does kick in on the image when you scroll with your fingertip — I don't find this to be a big problem, but if anyone does have a recommendation for a fix on that, I'd appreciate it! Lastly! One thing I could not figure out how to do (and it's probably simple, I'm just not very CSS-savvy), is — rather than change the opacity of the image to something lighter, instead, change the image to a solid color upon rollover/hover (like you see here).
×
×
  • Create New...