Adding Text Over Image Dawn

[dferdesign]

Hi everyone,

I am attempting to recreate this section in Dawn (see image below). I was previously using the "District" theme that included a section called "Gallery" where you can have 3 clickable images side by side with text overlay that would zoom on hover. Can someone help me replicate this in Dawn?

The closest option that I can find is the "Multicolumn" section but it does not look or perform as intended. Below is a screenshot from the "District" theme of what I am attempting to replicate.

[WalkYourStyle]

So what you want is to have a text in the middle of the image? You can use a multicolumn section and then add some css to center the text

[dferdesign]

Correct. I would also like it to behave as a link with a hover effect (zoom + color overlay). Any clarification on the best css to go about these edits? 

[WalkYourStyle]

Do have the multicolumn section in your store? If so in the customization for each column you can add a link and also the text you want. 

Then could you please share your store's URL?

[dferdesign]

Yes I have the multicolumn section. Currently using Dawn 15.0.0. My site isn't published yet. Any chance that you can help me with the CSS to achieve this result? 

[WalkYourStyle]

Can you share a preview of your website? 

[dferdesign]

https://1ir0shipm0yzi27b-22176011.shopifypreview.com

[WalkYourStyle]

Can you please add a link to the multicolumn?

[WalkYourStyle]

Also it would look better if you completed all the columns. Image, Text, Link

[dferdesign]

Updated: 

https://1ir0shipm0yzi27b-22176011.shopifypreview.com

[WalkYourStyle]

The links?

[dferdesign]

I had added them but didn't realize this section also required a link label. Just updated. To be clear, I don't want to utilize the link label on the final product. Just a clickable image. 

[WalkYourStyle]

You want to have a link on the image but not necessarily on the text right?. Because the text is in the middle of the image so it doesn't change anything.

[WalkYourStyle]

For the Text placement add this code at the end of your 'base.css' file.

.page-width.section-template--16969461891234__multicolumn_V4tqcT-padding.isolate.scroll-trigger.animate--slide-in .multicolumn-card__info{
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
}

.page-width.section-template--16969461891234__multicolumn_V4tqcT-padding.isolate.scroll-trigger.animate--slide-in .multicolumn-card__info .inline-richtext{
  color: white;
}

[dferdesign]

So it added the text over the image and turned it white, as needed.

Now I just need to remove the link text and arrow so that the only thing that shows is the category title (i.e. "Performance") . 

Also I noticed that the longer text is breaking the word into two lines when viewed on a smaller screen/mobile. 

[WalkYourStyle]

Question: If you have added a link label remove it. Just leave the link.
Instructions

1. Go to 'Online Store' -> Theme -> Edit Code

2. In your sections folder, locate the file 'multicolumn.liquid'

3. Copy the contents of that file

4. Create a new file in the sections folder named: 'multicolumn-backup.liquid'

5. Paste everything in the new file

6. In the 'multicolumn.liquid file' locate the element with class name 'multicolumn-card__image-wrapper multicolumn-card__image-wrapper--'.

7. It looks like this

8. Just below that element and above the element with class name 'media media--transparent media--' (in between) add this code

{% if block.settings.link != blank %}
    <a class="my-column-link" href="{{ block.settings.link }}">
{% endif %}

After you've added the above code it should like this

9. This next step is very important to place the next piece of code in the right position.(Be Careful)

     Find the <div> element with class name 'media media--transparent media--'. After you find this element, find the closing tag </div> of that element.  An easy way to find it is to go to the opening tag and place the cursor just before the '<' symbol. Then use the down keyword(arrow) to find the closing tag. The '<' symbol of the closing tag should touch the cursor.  After you find the closing tag, Just before add this code

{% if block.settings.link != blank %}
   </a>
{% endif %}  

After you've added the code it should look like this

   10. Now find the div element with class name 'multicolumn-card__info'. Copy the entire element. Do not forget the it's closing div tag '</div>'. Then Paste it just above the last code you added. After you've done that it should look like this

     

11. Add some additional css in the 'base.css'

.page-width.section-template--16969461891234__multicolumn_V4tqcT-padding.isolate.scroll-trigger.animate--slide-in .multicolumn-card__info .inline-richtext{
  text-decoration: none;
}

 
If after the steps you have problems, provide me with the updated code. So I can see if you made mistakes.

[dferdesign]

Thank you so much. Looks like that code did that trick. If you don't mind, there are still a couple of tweaks that are off. Still a couple of tweaks that are off. 

1. The longer titles such as "Performance" are still creating a line break. (See image below)

2. The titles are not centered vertically. Slightly high. 

3. Is it possible to add some kind of hover effect? Would like to have a subtle zoom and color overlay for the image itself. 

[WalkYourStyle]

At the end of your 'base.css' add the below css

For the wrapping and not centered properly title, add this code

.page-width.section-template--16969461891234__multicolumn_V4tqcT-padding.isolate.scroll-trigger.animate--slide-in .multicolumn-card__info {
    padding: 0 !important;
}

 For the Hover effects add this code

/* Zoom in the image and title when hovering over them */
.page-width.section-template--16969461891234__multicolumn_V4tqcT-padding.isolate.scroll-trigger.animate--slide-in .my-column-link:hover .media {
    transform: scale(1.1);
}
.page-width.section-template--16969461891234__multicolumn_V4tqcT-padding.isolate.scroll-trigger.animate--slide-in .my-column-link:hover .multicolumn-card__info {
    transform: translate(-50%, -50%) scale(1.1) !important;
}

/* Smooth transition when hover */
.page-width.section-template--16969461891234__multicolumn_V4tqcT-padding.isolate.scroll-trigger.animate--slide-in .media {
    transition: transform 0.15s ease-out;
}
.page-width.section-template--16969461891234__multicolumn_V4tqcT-padding.isolate.scroll-trigger.animate--slide-in .media {
    transition: transform 0.15s ease;
}
.page-width.section-template--16969461891234__multicolumn_V4tqcT-padding.isolate.scroll-trigger.animate--slide-in .multicolumn-card__info {
    transition: transform 0.15s ease;
}

Also for the color overlay, can you please tell me what do you mean exactly?

[dferdesign]

I would essentially like to copy the zoom effect from my current theme: https://jigalode.com

The zoom effect that you provided is great but I would like to have it zoom within the original size of the image rather than have the entire image get larger. Similar to the example on the site provided above. Does that make sense?

You can see the similar section that I am trying to replicate below the main slider. What I meant by color overlay is when I hover over the image, having the image get darker with a semi-transparent black overlay. 

Thank you so much for your patience and sticking through it with me. 

[WalkYourStyle · Accepted solution]

Replace the hover effects css(last piece of css code I provided) with the below

/* Zoom in the image and title when hovering over them */
.page-width.section-template--16969461891234__multicolumn_V4tqcT-padding.isolate.scroll-trigger.animate--slide-in .my-column-link:hover img {
    transform: translate(-50%) scale(1.05);
}
.page-width.section-template--16969461891234__multicolumn_V4tqcT-padding.isolate.scroll-trigger.animate--slide-in .my-column-link:hover .multicolumn-card__info {
    transform: translate(-50%, -50%) scale(1.1) !important;
}

/* Smooth transition when hover */
.page-width.section-template--16969461891234__multicolumn_V4tqcT-padding.isolate.scroll-trigger.animate--slide-in img {
    transition: transform 0.8s ease;
}
.page-width.section-template--16969461891234__multicolumn_V4tqcT-padding.isolate.scroll-trigger.animate--slide-in .multicolumn-card__info {
    transition: transform 0.8s ease;
}

/* Overlay */
.page-width.section-template--16969461891234__multicolumn_V4tqcT-padding.isolate.scroll-trigger.animate--slide-in .my-column-link:hover .media::before {
    z-index: 1;
    transition: opacity 0.8s ease;
    opacity: 1;
}
.page-width.section-template--16969461891234__multicolumn_V4tqcT-padding.isolate.scroll-trigger.animate--slide-in .my-column-link .media::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 0;
    opacity: 0;
}

[dferdesign]

That is just about perfect. Is there any way to not place the overlay over the text? The text is getting darkened as well and I would like to avoid this. 

[WalkYourStyle]

Yes ofcourse. Can you please share a preview of your store? 

[dferdesign]

https://hnyvzl7wwatk8s2d-22176011.shopifypreview.com

[WalkYourStyle]

Just add this at the end of your 'base.css' file

.page-width.section-template--16969461891234__multicolumn_V4tqcT-padding.isolate.scroll-trigger.animate--slide-in .multicolumn-card__info {
    z-index: 2;
}

[dferdesign]

You are the best. I know this was probably more than you were expecting to help with but I appreciate you taking the time to walk me through it. 

[INFRA]

Hi there,

I just walked through the steps of this thread and added below code in a duplicated section, but nothing is showing differently. Would you be able to have a look?

          <div class="multicolumn-card__image-wrapper multicolumn-card__image-wrapper--{{ section.settings.image_width }}-width{% if section.settings.image_width != 'full' or spaced_image %} multicolumn-card-spacing{% endif %}">
               {% if block.settings.link != blank %}
    <a class="my-column-link" href="{{ block.settings.link }}">
{% endif %}
                  <div
                    class="media media--transparent media--{{ section.settings.image_ratio }}"
                    {% if section.settings.image_ratio == 'adapt' %}
                      style="padding-bottom: {{ 1 | divided_by: highest_ratio | times: 100 }}%;"
                    {% endif %}
                  >
                    {%- liquid
                      assign number_of_columns = section.settings.columns_desktop
                      assign number_of_columns_mobile = section.settings.columns_mobile
                      assign grid_space_desktop = number_of_columns | minus: 1 | times: settings.spacing_grid_horizontal | plus: 100 | append: 'px'
                      assign grid_space_tablet = number_of_columns_mobile | minus: 1 | times: settings.spacing_grid_horizontal | plus: 100 | append: 'px'
                      assign grid_space_mobile = number_of_columns_mobile | minus: 1 | times: settings.spacing_grid_horizontal | divided_by: 2 | plus: 30 | append: 'px'
                      if section.settings.image_width == 'half'
                        assign image_width = 0.5
                      elsif section.settings.image_width == 'third'
                        assign image_width = 0.33
                      else
                        assign image_width = 1
                      endif
                    -%}
                    {% capture sizes %}
                      (min-width: {{ settings.page_width }}px) calc(({{ settings.page_width }}px - {{ grid_space_desktop }}) * {{ image_width }} /  {{ number_of_columns }}),
                      (min-width: 990px) calc((100vw - {{ grid_space_desktop }}) * {{ image_width }} / {{ number_of_columns }}),
                      (min-width: 750px) calc((100vw - {{ grid_space_tablet }}) * {{ image_width }} / {{ number_of_columns_mobile }}),
                      calc((100vw - {{ grid_space_mobile }}) * {{ image_width }} / {{ number_of_columns_mobile }})
                    {% endcapture %}
                    {{
                      block.settings.image
                      | image_url: width: 3200
                      | image_tag:
                        widths: '50, 75, 100, 150, 200, 300, 400, 500, 750, 1000, 1250, 1500, 1750, 2000, 2250, 2500, 2750, 3000, 3200',
                        sizes: sizes,
                        class: 'multicolumn-card__image'
                    }}
                  </div>
       <div class="multicolumn-card__info">
                {%- if block.settings.title != blank -%}
                  <h3 class="inline-richtext">{{ block.settings.title }}</h3>
                {%- endif -%}
                {%- if block.settings.text != blank -%}
                  <div class="rte">{{ block.settings.text }}</div>
                {%- endif -%}
                {%- if block.settings.link_label != blank -%}
                  <a
                    class="link animate-arrow"
                    {% if block.settings.link == blank %}
                      role="link" aria-disabled="true"
                    {% else %}
                      href="{{ block.settings.link }}"
                    {% endif %}
                  >
                    {{- block.settings.link_label | escape -}}
                    <span class="svg-wrapper"
                      ><span class="icon-wrap">&nbsp;{{ 'icon-arrow.svg' | inline_asset_content }}</span></span
                    >
                  </a>
                {%- endif -%}
              </div>
                {% if block.settings.link != blank %}
   </a>
{% endif %}
                </div>
              {%- endif -%}
   
            </div>
          </li>
        {%- endfor -%}
      </ul>

It's the column section with the image at the bottom of the page, here.  Password: awffom