Bedford: Text and Color Overlay on Hover/Rollover of Gallery Grid Images

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!

Hi Bethany,

I'd also love to create an effect similar to the one you've achieved! Any help or suggestions would be most appreciated!

Thanks,Luiza

@Storyboard @ghohendorf I might be too late, but I think I figured it out! I'm a novice with CSS, but the class at line 39 has some extra text that seemed to be breaking it.

Replace that whole class with this and it should fix it (I can't figure out how to post the code with line numbers, sorry!):

.sqs-block-image .image-block-outer-wrapper.layout-caption-overlay-hover .intrinsic .image-caption-wrapper {
  background: #fddcce;
  opacity: .9;
}

Hi Bethany! It seems you figured out how to add the hover effect. Do you mind sharing with me the code you used to achieve this effect? I'm trying to do it on my website right now (using the marquee theme) with white captions and #f93a55 for the background of the square photos. I would ideally like the opacity around the same as on your website. Any help would be greatly appreciated! Thanks :)

Zack

Here's how I did it, based off of Bethany's site's code.

.sqs-gallery-block-grid .slide .margin-wrapper:hover a.image-slide-anchor { opacity: .3; -webkit-transition: opacity .5s ease-in-out; transition: opacity .5s ease-in-out; -moz-transition: opacity .5s ease-in-out; -o-transition: opacity .5s ease-in-out; -ms-transition: opacity .5s ease-in-out; margin-bottom: 0px !important;}

#block-yui31722143136545125111910 .sqs-gallery-block-grid .slide .margin-wrapper .image-slide-title { display: block; position: absolute; top: auto; right: 0; bottom: 0; left: 0; padding: 1em; -webkit-transition: all .4s ease-out; -moz-transition: all .4s ease-out; -o-transition: all .4s ease-out; -ms-transition: all .4s ease-out; transition: all .4s ease-out; }

.sqs-gallery-block-grid .slide .margin-wrapper .image-slide-title { color: #3c77bc; opacity: 0; text-transform: uppercase;font-size: 34px; letter-spacing: 1px;margin-bottom: 240px;}

.sqs-gallery-block-grid .slide .margin-wrapper:hover .image-slide-title {color: #3c77bc; opacity:1; text-transform: uppercase;
vertical-align: middle;font-size: 35px; letter-spacing: 1px;margin-bottom: 240px}

You'll have to check your own HTML to find your version of "#block-yui31722143136545125111910".

I later added media queries to keep the text in the center of the image. If anyone can figure out a pure-css solution to that problem, I'd love to hear it.

Here's a link to my site: http://morganroselynch.com

This works great, however, there's an error with clickthorugh links. They only work on the top half of the image. Is there an easy way to fix this?

To resolve this for me, instead of positioning the title text using PX, I used a % and did not use 'top' but instead 'bottom' and it seemed to do the trick...

 .sqs-gallery-block-grid .slide .margin-wrapper:hover .image-slide-title {
 color: white; 
 opacity:1; 
     bottom: 40%;
 text-transform: uppercase; 
 vertical-align: middle; 
 font-size: 1em; 
 line-height: 125%;
 letter-spacing: 2px; 
 margin-bottom: 240px;
}

Hi Bethany,

I'd also love to create an effect similar to the one you've achieved! Any help or suggestions would be most appreciated!

Thanks,Luiza

I tried to replicate this code with my "yui" and it just puts all the code text at the top of the page :(

Maybe its because I'm using a different template: Avenue?

I tried to replicate this code with my "yui" and it just puts all the code text at the top of the page :(

Maybe its because I'm using a different template: Avenue?

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

Hi there, I've managed to get the same code to work on my Ishimoto template. The problem is when I use this,the hover over effect takes away the click through link.

Any ideas or suggestions to make this work?

Hi there, I've managed to get the same code to work on my Ishimoto template. The problem is when I use this,the hover over effect takes away the click through link.

Any ideas or suggestions to make this work?

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.

That fixed it! Thank you so much! Also - love your work, I am currently planning my wedding in NZ :)

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

@HeartAndDash thank you so much for your support, I used your code and it worked perfectly. I changed a small detail (the number related to the opacity intensity) - although I do not understand about CSS my guess was correct and it worked haha ( as you can see in the gallery grid in this link: www.tiago-henriques.com/works )

I'm going to ask you a very silly question, I believe (I know nothing about coding): I noticed that in your code there were some keywords related to the titles' properties, such as color, etc. But there are no titles on the images in which the hover effect is applied once the code is added. Is there a way (maybe a standard code I can add to specific places and I just change the "title's name") I can make the title appear once you hover over the image?

Thank you so much for your time and attention.

is there a way that I could apply this and restrict to one page of my site only?

Is there any way to restrict this to one gallery block only and not across the whole site? @HeartandDash

Is there any way to restrict this to one gallery block only and not across the whole site? @HeartandDash

@lovepaperco Please make sure that you are only adding answers to posts when you have an answer to provide. Otherwise, you will want to add your response as a comment. I've automatically converted this for you.

How did you add the text using media queries? If its too much of a hassle to explain, do you have any helpful resources you can point me to?

Thanks @heartanddash for this! I was able to get it on my site but would love to be able to do what you did on your portfolio page, or do something similar with a summary grid. I just have a little more text I want do display under each title. Any thoughts on how to do this? My site is here: http://www.wayfindingacademy.org/wayfinder-weekend#details

I can't seem to change the dark grey color background. Any advise?

@heartanddash - This was the exact trick I was looking for. I made a grid from the images and boom. What code would i need to add to reduce the white background padding in-between the images?

Thanks in advance.