Jump to content

Requesting CSS code to create dark mask and "Learn More" button with hover on image in summary-block

Recommended Posts

Site URL: https://www.blueridgeresearch.com

Hello, and thank you in advance for looking at my question. I am looking for CSS code that will create a dark mask and white "Learn More" button on images when hovered/tapped. The images are inside a Summary block. The code can create this action and apply to ALL summary blocks, rather than using a specific id for each one. Please see screen shot below to see illustration. My main question is for the dark mask and Learn More button, but it would be nice if the space below the image where the title and excerpt are pulled in could be a light gray and then turn darker with the hover/tap. I currently have the Summary Block title link disabled.

image.png.bdb3cbfce2809c05c3b01e68d8b91a0c.png

I am using the Burke template. Here is an example of page that I'm working on. https://www.blueridgeresearch.com/home-1

Link to comment
13 hours ago, mikevatech said:

Site URL: https://www.blueridgeresearch.com

Hello, and thank you in advance for looking at my question. I am looking for CSS code that will create a dark mask and white "Learn More" button on images when hovered/tapped. The images are inside a Summary block. The code can create this action and apply to ALL summary blocks, rather than using a specific id for each one. Please see screen shot below to see illustration. My main question is for the dark mask and Learn More button, but it would be nice if the space below the image where the title and excerpt are pulled in could be a light gray and then turn darker with the hover/tap. I currently have the Summary Block title link disabled.

image.png.bdb3cbfce2809c05c3b01e68d8b91a0c.png

I am using the Burke template. Here is an example of page that I'm working on. https://www.blueridgeresearch.com/home-1

You mean Expertise section? Can you enable read more link first?

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
On 7/29/2021 at 4:16 AM, tuanphan said:

You mean Expertise section? Can you enable read more link first?

 

Hello Tuanphan. Thank you so much for looking at this. Yes, the Expertise section but I would also like to do the same thing with the Team section. Same functionality for all the Summary blocks. If you can give me the code for the Expertise summary block I can modify it for the other Summary blocks. Or, perhaps an option that will apply to all the Summary blocks. I'm not sure if that is the way to go. For the purpose of this inquiry I have enabled the link on the first Expertise image (Noise Models) in the Expertise Summary block. I hope this is what you needed. Thank you very much. I appreciate your expertise!

Link to comment
On 8/1/2021 at 12:23 PM, mikevatech said:

Hello Tuanphan. Thank you so much for looking at this. Yes, the Expertise section but I would also like to do the same thing with the Team section. Same functionality for all the Summary blocks. If you can give me the code for the Expertise summary block I can modify it for the other Summary blocks. Or, perhaps an option that will apply to all the Summary blocks. I'm not sure if that is the way to go. For the purpose of this inquiry I have enabled the link on the first Expertise image (Noise Models) in the Expertise Summary block. I hope this is what you needed. Thank you very much. I appreciate your expertise!

 

On 8/1/2021 at 12:23 PM, mikevatech said:

Hello Tuanphan. Thank you so much for looking at this. Yes, the Expertise section but I would also like to do the same thing with the Team section. Same functionality for all the Summary blocks. If you can give me the code for the Expertise summary block I can modify it for the other Summary blocks. Or, perhaps an option that will apply to all the Summary blocks. I'm not sure if that is the way to go. For the purpose of this inquiry I have enabled the link on the first Expertise image (Noise Models) in the Expertise Summary block. I hope this is what you needed. Thank you very much. I appreciate your expertise!

Hello Tuan, I don't want to bother you, as I'm sure you are very busy helping many other people, but I hope you have not forgotten about my question. Is there any additional information you need to help me with this css code? If you give me the code for the Expertise summary block, I can modify it for the other summary blocks. To recap: A dark mask and white "Learn More" button on images when hovered/tapped. Please see screen shot above to see illustration. My main question is for the dark mask and Learn More button, but it would be nice if the space below the image where the title and excerpt are pulled in could be a light gray and then turn darker with the hover/tap. I have enabled the link on the first image in the Expertise Summary block - Noise Models. Thank you again.

Link to comment

Site URL: https://www.blueridgeresearch.com

I posted this question in July but have not had a response so I am reposting as a new question in the hope that someone will be able to provide the CSS code I need to create a dark mask and a white "Learn More" button on images when hovered/tapped. The images are inside a summary-block. The code can create this action for a specific summary-block using the ID. I can modify the ID to apply to additional summary-blocks. An example of the summary-block would be the "Expertise" section on this page - https://www.blueridgeresearch.com/home-1Please see screen shot below to see illustration of what I am looking for. My main question is for the dark mask and Learn More button, but I would also like it if the space below the image where the title and excerpt are pulled in could be a light gray and then turn darker with the hover/tap. For the purpose of this question I have enabled the link on the first image (Noise Models). I truly appreciate the talented volunteers on this forum who have helped me before. I am trying to learn CSS so I don't need to ask for help but this one is beyond me. Thank you in advance to anyone who can help with this question.

image.png.85501386e2ebe7f49143b03e2363acca.png

Link to comment

Hi,

you can mostly do what you're talking about with CSS. CSS is for the most part only for changing style and adding new content in isn't really its strength. for that you'd want to start using javascript, and it gets more complicated, requires a premium/business plan and personally I think the JS solutions are often trying to make Squarespace do something it doesn't want to do, which makes it harder to maintain etc.

So, assuming you've rationalised all that and really want to make it do something it doesn't currently do then here's a CSS only way of getting what you want. I tested this with a summary block set to grid. I've used your block id, but if you change things around you'll obviously need to update it.


#yui_3_17_2_1_1628375697042_148 .summary-item {
  position:relative;
  overflow:visible;
}

#yui_3_17_2_1_1628375697042_148 .summary-item:hover:before {
  content:'';
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  display:block;
  opacity:0.3;
  background-color:black;
  z-index:100;
  transform: scale(1.1)
}

#yui_3_17_2_1_1628375697042_148 .summary-item:hover:after {
  content:'Learn More';
  position:absolute;
  top:10%;
  left:25%;
  width:50%;
  text-align:center;
  display:block;
  color:white;
  padding:5px;
  border:solid 2px white;
  font-weight:bold;
  z-index:101;
}

#yui_3_17_2_1_1628375697042_148 a.summary-title-link:after {
  content:'';
  position:absolute;
  display:block;
  top:0;
  left:0;
  width:100%;
  height:100%;
  z-index:102;
}

Here's what this is doing:

  • Sets the overflow of your summary item to visible. the summary items don't have padding so to make the overlay look better I'll scale it later on which you can only see if you set it to visible here.
  • Adding a content block overlay to the summary item. This is set to opacity of 0.3 to make this darker push this number up towards 1. it scales by 10% to add padding. set this to 1 or remove this line to have a tight overlay
  • Adds learn more "button". it's not really a button. you can't add one with css, you'd have to use javascript for this, but seeing as the whole thing is going to be clickable it probably doesn't matter
  • takes the summary title (which is a link) and "stretches it" to go on top of the overlay. This makes the whole thing clickable.

 

This is close I think to what you want. if you want a real button, you'd need to use javascript to add it. But to be honest, I'd really think hard about whether trying to customise this sort of thing away from what sqs wants to do. it does make it a lot harder to maintain in the long run. hover effects don't translate to mobile well, and customising off-the-shelf software too much is pretty much always a bad idea... sacrilege to say so in a forum like this, but just my opinion. 

that said, hope the code helps. and at least for educational purposes there's some good css lessons here...

EDIT: you have some cool pictures of planes on your site. worth editing it just to tell you that.

Edited by iamdavehart
Cool pictures of planes

Dave Hart. Software/Technology Consultant living in London. buymeacoffee 

Link to comment
On 8/5/2021 at 3:06 AM, mikevatech said:

 

Hello Tuan, I don't want to bother you, as I'm sure you are very busy helping many other people, but I hope you have not forgotten about my question. Is there any additional information you need to help me with this css code? If you give me the code for the Expertise summary block, I can modify it for the other summary blocks. To recap: A dark mask and white "Learn More" button on images when hovered/tapped. Please see screen shot above to see illustration. My main question is for the dark mask and Learn More button, but it would be nice if the space below the image where the title and excerpt are pulled in could be a light gray and then turn darker with the hover/tap. I have enabled the link on the first image in the Expertise Summary block - Noise Models. Thank you again.

Hi. Can you enable read more? I don't see link here. If your site is live, you can duplicate above page, enable there & share page duplicated url. We can check easier

Edited by tuanphan

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
On 8/7/2021 at 6:47 PM, iamdavehart said:

Hi,

you can mostly do what you're talking about with CSS. CSS is for the most part only for changing style and adding new content in isn't really its strength. for that you'd want to start using javascript, and it gets more complicated, requires a premium/business plan and personally I think the JS solutions are often trying to make Squarespace do something it doesn't want to do, which makes it harder to maintain etc.

So, assuming you've rationalised all that and really want to make it do something it doesn't currently do then here's a CSS only way of getting what you want. I tested this with a summary block set to grid. I've used your block id, but if you change things around you'll obviously need to update it.


#yui_3_17_2_1_1628375697042_148 .summary-item {
  position:relative;
  overflow:visible;
}

#yui_3_17_2_1_1628375697042_148 .summary-item:hover:before {
  content:'';
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  display:block;
  opacity:0.3;
  background-color:black;
  z-index:100;
  transform: scale(1.1)
}

#yui_3_17_2_1_1628375697042_148 .summary-item:hover:after {
  content:'Learn More';
  position:absolute;
  top:10%;
  left:25%;
  width:50%;
  text-align:center;
  display:block;
  color:white;
  padding:5px;
  border:solid 2px white;
  font-weight:bold;
  z-index:101;
}

#yui_3_17_2_1_1628375697042_148 a.summary-title-link:after {
  content:'';
  position:absolute;
  display:block;
  top:0;
  left:0;
  width:100%;
  height:100%;
  z-index:102;
}

Here's what this is doing:

  • Sets the overflow of your summary item to visible. the summary items don't have padding so to make the overlay look better I'll scale it later on which you can only see if you set it to visible here.
  • Adding a content block overlay to the summary item. This is set to opacity of 0.3 to make this darker push this number up towards 1. it scales by 10% to add padding. set this to 1 or remove this line to have a tight overlay
  • Adds learn more "button". it's not really a button. you can't add one with css, you'd have to use javascript for this, but seeing as the whole thing is going to be clickable it probably doesn't matter
  • takes the summary title (which is a link) and "stretches it" to go on top of the overlay. This makes the whole thing clickable.

 

This is close I think to what you want. if you want a real button, you'd need to use javascript to add it. But to be honest, I'd really think hard about whether trying to customise this sort of thing away from what sqs wants to do. it does make it a lot harder to maintain in the long run. hover effects don't translate to mobile well, and customising off-the-shelf software too much is pretty much always a bad idea... sacrilege to say so in a forum like this, but just my opinion. 

that said, hope the code helps. and at least for educational purposes there's some good css lessons here...

EDIT: you have some cool pictures of planes on your site. worth editing it just to tell you that.

Hello Dave. Thank you very much for the code AND the explanation. I was able to tweek it and make it work for different summary blocks. I had to replace the yui number with the block-yui number, otherwise it kept changing every time I made any update to the page. I was able to find the answer to that little problem right here on this forum. Thank you and thanks to Tuan who also responded and has helped me in the past. I am learning a lot from the generous volunteers who oversee this forum. Thank you all for sharing your talent and wisdom!

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • 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.