Hovering Captions in the *Middle* of Images // Ahmir Miller Template

Hi, I haven't seen anything yet to help for this and would appreciate any help for my portfolio site. 

On my template (the Ahmir Miller), I am trying to get a text overlay on each Home Page photo as you hover, BUT the only "overlay" option offered is at the bottom and there is no way to edit the placement, size, font, etc. Is there anyway to do an overlay similar to the York template (photo attached below)? I really don't want to have to change my entire site template just to get this, but I need titles on my projects so people can understand what each image will click into (page-wise). I really appreciate any help!

Current Text Overlay option:

York Template's Text Overlay:

10 hours ago, Kayma said:

Hi, I haven't seen anything yet to help for this and would appreciate any help for my portfolio site. 

On my template (the Ahmir Miller), I am trying to get a text overlay on each Home Page photo as you hover, BUT the only "overlay" option offered is at the bottom and there is no way to edit the placement, size, font, etc. Is there anyway to do an overlay similar to the York template (photo attached below)? I really don't want to have to change my entire site template just to get this, but I need titles on my projects so people can understand what each image will click into (page-wise). I really appreciate any help!

Current Text Overlay option:

York Template's Text Overlay:

 Can you share your website URL?

@Web_SolutionsMy website URL is https://www.wolfinbargerdesign.com. Once you click "Let's Work" on the front cover page, it will take you to my home page, where my project photos are all laid out, which is where I would like the captions to overlay the project photos (this is all below my intro video).

1 hour ago, Kayma said:

@Web_SolutionsMy website URL is https://www.wolfinbargerdesign.com. Once you click "Let's Work" on the front cover page, it will take you to my home page, where my project photos are all laid out, which is where I would like the captions to overlay the project photos (this is all below my intro video).

I can see there is no title with that image. Can you add title? 

@Web_Solutions My apologies, it's looking like on my home page the images are actually in a grid, and I can't seem to find a way to add titles at all via grid. But, if you click on the last image (bottom row, the very right - in the photo below) - you can see images that are not in a grid, just images alone that I have added titles to.

Through either one (image alone, or gridded images), if you have any help on adding titles in the center of each image, anything would be helpful. Thank you!

www.wolfinbargerdesign.com

31 minutes ago, Kayma said:

@Web_Solutions My apologies, it's looking like on my home page the images are actually in a grid, and I can't seem to find a way to add titles at all via grid. But, if you click on the last image (bottom row, the very right - in the photo below) - you can see images that are not in a grid, just images alone that I have added titles to.

Through either one (image alone, or gridded images), if you have any help on adding titles in the center of each image, anything would be helpful. Thank you!

www.wolfinbargerdesign.com

Add these code on Custom CSS panel in Website > Utilities > Website Tools > Custom CSS.

.sqs-block-image .image-block-outer-wrapper.layout-caption-overlay-hover .image-caption-wrapper {
  top: 0 !important;
  height: 100% !important;
  max-height: 100% !important;
  display: flex;
  align-items: center;
  justify-content: center;
}

https://www.loom.com/share/2d1e7a961e4f426bb8d9990e25638c5d?sid=5c95d317-4059-4aec-b405-70da5f414481

@Web_Solutions You are an angel!!! Thank you! Last thing, is there anyway to make the hovering text bigger or bolded? Or change the font? just for future reference. Let me know! Thank you again. 

1 hour ago, Kayma said:

@Web_Solutions You are an angel!!! Thank you! Last thing, is there anyway to make the hovering text bigger or bolded? Or change the font? just for future reference. Let me know! Thank you again. 

Yes, Here is the code. add this code below the previous code. You increase or decrease the font site 20px to 25px or 18px or as you want?

.sqs-block-image .image-block-outer-wrapper.layout-caption-overlay-hover .image-caption p {
  font-size: 20px !important;
  font-weight: bold;
  text-align: center;
}

@Web_Solutions Hi, thank you so much, this worked! Now, sadly I am having another issue though. Now that there are these hovering captions, whenever I click on the image (when it should be linked to go to another page), it will not take me there. It just lets you hover, but when I click on the linked image it won't take me to that page anymore. Do you have any idea how to fix or why this is?

7 hours ago, Kayma said:

@Web_Solutions Hi, thank you so much, this worked! Now, sadly I am having another issue though. Now that there are these hovering captions, whenever I click on the image (when it should be linked to go to another page), it will not take me there. It just lets you hover, but when I click on the linked image it won't take me to that page anymore. Do you have any idea how to fix or why this is?

Yes. Add the code at the Custom CSS panel very bottom. 

.sqs-block-image .sqs-block-image-link:after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    z-index: 9999999;
}

@Web_Solutions this worked perfectly. Thank you!! God Bless.

@Web_Solutions I do apologize, here is my very last question – is there a way to change the font of the hovering text? Please let me know. I greatly appreciate you!

7 hours ago, Kayma said:

@Web_Solutions I do apologize, here is my very last question – is there a way to change the font of the hovering text? Please let me know. I greatly appreciate you!

Yes, Replace the previous code(see the image) with the code below.

.sqs-block-image .image-block-outer-wrapper.layout-caption-overlay-hover .image-caption p {
  font-size: 20px !important;
  font-weight: bold;
  text-align: center;
  font-family: baskerville-poster-pt !important;
}

@Web_Solutions Hi there, thank you so much! Is there anyway to create a second line on the hovering text, to be a smaller size? See photos attached, my current page is what I currently have, versus the photo of what I would like my text sizing/layout to be similar to.

I am looking for the top text to be the title (in bold/all caps), and the text below to be the description (as a smaller font/lowercase). Please let me know if this is possible! Thank you again for all your help! 

On 11/8/2023 at 1:24 AM, Kayma said:

Hi there, thank you so much! Is there anyway to create a second line on the hovering text, to be a smaller size? See photos attached, my current page is what I currently have, versus the photo of what I would like my text sizing/layout to be similar to.

I am looking for the top text to be the title (in bold/all caps), and the text below to be the description (as a smaller font/lowercase). Please let me know if this is possible! Thank you again for all your help! 

 

The site is private, if you change it to password protected or publish, we can check easier

@tuanphan @Web_Solutions Hi, my apologies! The site is available now. Please let me know! Thank you.

@tuanphan I'm wondering if you could let me know on how to change the size of just one the lines on the hovering text. As well as the spacing in between the two lines of text? Let me know if this makes sense!! Thank you so much

52 minutes ago, Kayma said:

@tuanphan @Web_Solutions Hi, my apologies! The site is available now. Please let me know! Thank you.

You already did it. What you want here?

@Web_Solutions The text size in the second line is actually the same size as the text above, it is just lowercase. I'm wanting to make the second line of text a few sizes smaller if possible? But keep the first line of text at it's same size.

And as for the spacing in between the texts, I cannot shorten the leading (space in between the 2 lines).  Whenever I click  "enter" it automatically goes that far beneath the first line of text.

47 minutes ago, Kayma said:

@Web_Solutions The text size in the second line is actually the same size as the text above, it is just lowercase. I'm wanting to make the second line of text a few sizes smaller if possible? But keep the first line of text at it's same size.

And as for the spacing in between the texts, I cannot shorten the leading (space in between the 2 lines).  Whenever I click  "enter" it automatically goes that far beneath the first line of text.

Here is the code

.sqs-block-image .image-block-outer-wrapper.layout-caption-overlay-hover .image-caption p{
  margin: 0px !important;
}
.sqs-block-image .image-block-outer-wrapper.layout-caption-overlay-hover .image-caption p:nth-child(1n+2){
  font-size: 15px !important;
}

Hi! my final question is about the space between photos on my site. Do you know what would help with this? See photo below - thank you all! @Web_Solutions @tuanphan

@Kayma ,

Site is private again. Without looking at it, try giving each card/image element a margin-bottom that matches the right margin.

.sqs-block-image {
	margin-bottom: 1rem;
}

This is just a shot in the dark, would need to look at the site to get you something accurate.

@AlexSanhi!!  it's published now! Let me know if that works! Thank you so much!

4 hours ago, Kayma said:

@AlexSanhi!!  it's published now! Let me know if that works! Thank you so much!

 

Add these code on Custom CSS panel in Website > Utilities > Website Tools > Custom CSS.

#new-page-56 .image-block {
    padding-bottom: 17px !important
}

@Web_SolutionsHi, thank you!! So this helped the horizontal spacing between the space circled in red, but it did not fix the vertical spacing between the photos (circled in blue). Do you know how to fix this? Thank you.