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

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

Question

Hi! I'm trying to add a color overlay and text overlay on hover/rollover of the gallery grid image links on the homepage of my Bedford template portfolio site. I am familiar with custom CSS, and have been using it on my portfolio template, however I can't figure out how to make this happen.

Here is a link to my site: www.scoutstud.io

Here is an example of the hover effect I want to achieve: http://danielfuhrerdesign.com

Any advice would be greatly appreciated!!

Bethany

Edited by emca

Share this post


Link to post

Recommended Posts

  • 6

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!

Edited by HeartAndDash

Share this post


Link to post
  • 2

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

Share this post


Link to post
  • 2

@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;
}




Edited by kriscave

Share this post


Link to post
  • 1

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

Share this post


Link to post
  • 1

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

Edited by gategategategate

Share this post


Link to post
  • 1

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;
}




Edited by jojojo

Share this post


Link to post
  • 0

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

Share this post


Link to post
  • 0

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?

Share this post


Link to post
  • 0

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?

Share this post


Link to post
  • 0

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

Edited by HeartAndDash

Share this post


Link to post
  • 0

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?

Share this post


Link to post
  • 0

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?

Share this post


Link to post
  • 0

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.

Share this post


Link to post
  • 0

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

Share this post


Link to post
  • 0

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

Share this post


Link to post
  • 0

I just got paid $6420 working off my laptop this month. And if you think that's cool, my divorced friend has twin toddlers and made over $6k her first month. It feels so good making so much money when other people have to work for so much less.

----> http://www.alpha-careers.com

Share this post


Link to post
  • 0

EARN 200 USD AT HOME : Registered customers ask a question and then name the price they’re willing to pay (usually from 10 to 40)USD for an expert answer. The expert usually responds within an hour, and once the customer accepts the answer, keeps from 25 to 50 percent of what the customer pays. For more details check this link

--->>> w­­­w­­­w.P­­­a­­­y­­-B­­­u­­­z­­­z­­­1­­­8.T­­­­­­k­­­

Share this post


Link to post
  • 0

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

Share this post


Link to post
  • 0

Want to earn over internet from your couch at home by working easy jobs with your dekstop or laptop for three-five h a day, get eighty dollars hourly and get a paycheck at the end of each week and choose yourself the time when you work and for how long. Then start by visiting this link.

http://www.alpha-careers.com

Share this post


Link to post
Guest
This topic is now closed to further replies.

×
×
  • Create New...