Picture captions

New Member
5 0 0

I am looking for a way to create captions for the photos on my events page (https://www.thecookiejardc.com/pages/custom-orders-events). I don't want to put titles or captions under the photos. I'd like for them to appear when you scroll over the photo. Thanks.

0 Likes
Shopify Staff (Retired)
Shopify Staff (Retired)
400 0 64

Hi Lindsay,

Britton here with the Shopify support team.

You should be able to accomplish this, but it will require some relatively substantial code edits. Ready? Here we go:

  1. In the rich text editor for the page you are using to add those images you will need to add two divs. To do this, first change the rich text editor over to html view. Then, for each image tag inside the editor wrap it inside of a div with the class "img-wrapper". Then, add another div right underneath. It should look something like this once you are done: 
    <div class="img-wrapper"><img alt="" src="//cdn.shopify.com/s/files/1/1183/1596/files/FullSizeRender-7_medium.jpg?1404257655804097086" style="float: none;position: relative;z-index: 0;"><div><span>Hover text goes here</span></div>
    
    </div>

    The second div is where your hover text goes for each image.

  2. In order to get the actual hover feature now you will need to add this to the bottom of your main CSS asset file: 

    .img-wrapper div {
    
        position: absolute;
        top: 0;
        background-color: black;
        left: 0;
        width: 100%;
        height: 100%;
        text-align: center;
        opacity: 0;
        transition: opacity .25s ease-in-out;
        -moz-transition: opacity .25s ease-in-out;
        -webkit-transition: opacity .25s ease-in-out;
        display:flex;
        align-items: center;
        justify-content: center;
                
    }
    
    .img-wrapper div:hover {
        opacity: 1 !important;
        background-color: (84,84,84,0.4);
    }

    If you experience any issues here with the hover background being larger than the image then you will need to change the height setting above to be the exact height of the image on your webpage in pixels.

This should allow you to get a basic "text-on-hover" sort of feature for your homepage images. As always, please back up your theme by duplicating it before making any code changes.

I hope that helps!

-Britton

 

Britton Shopify Guru
0 Likes
New Member
5 0 0

Thank you, but where is the main CSS asset file? I don't see anything with that name...

0 Likes
Shopify Staff (Retired)
Shopify Staff (Retired)
400 0 64

Hi again Lindsay,

It depends on which theme you are using, but generally you are looking for something like style.scss or theme.scss or, in some cases, timber.scss. If you could let me know which theme you are working with I can definitely help you with finding the right file.

-Britton

Britton Shopify Guru
0 Likes
New Member
3 0 0

Hi Britton,

I am having the same issue. I'm using the Brooklyn theme. Could you please point me to the CSS asset file?

thanks!

Ana

0 Likes
New Member
2 0 0

Hello

I am using canopy theme and I want to align my picture captions to the bottom of the picture. Can you please me with the above mention problems.

Thanks 

 

Untitled.png

0 Likes