Dawn theme, how to hover the collection name on the image?

[Elsie-L]

Hi,

I am using the latest Dawn theme. When I used the collection-list section, I tried to make the collection name center. I modified the Assets/component-card.css file. I added the margin-left and margin-right argument in the card__inner. But then I found out that in the featured-collection section, the product name and information also got centered. I then realized they shared the same css style in the component-card.css.

If I want to center the the collection name and even hover the name onto the image without affecting the featured-collection section, what should I do?

Many thanks,

Elsie

.card--card,
.card--standard .card__inner {
  position: relative;
  /* margin-left: auto;
  margin-right: auto; */
  box-sizing: border-box;
  border-radius: var(--border-radius);
  border: var(--border-width) solid rgba(var(--color-foreground), var(--border-opacity));
}

[Elsie-L · Accepted solution]

My solution was:

Step 1:

In Snippets/card-collection.liquid, I added a div after the image's div. I gave the div a class called centered_title_onImg.

{%- if card_collection.featured_image -%}
        <div class="card__media">
          <div class="media media--transparent media--hover-effect">
            <img
              srcset="{%- if card_collection.featured_image.width >= 165 -%}{{ card_collection.featured_image | image_url: width: 165 }} 165w,{%- endif -%}
                {%- if card_collection.featured_image.width >= 330 -%}{{ card_collection.featured_image | image_url: width: 330 }} 330w,{%- endif -%}
                {%- if card_collection.featured_image.width >= 535 -%}{{ card_collection.featured_image | image_url: width: 535 }} 535w,{%- endif -%}
                {%- if card_collection.featured_image.width >= 750 -%}{{ card_collection.featured_image | image_url: width: 750 }} 750w,{%- endif -%}
                {%- if card_collection.featured_image.width >= 1000 -%}{{ card_collection.featured_image | image_url: width: 1000 }} 1000w,{%- endif -%}
                {%- if card_collection.featured_image.width >= 1500 -%}{{ card_collection.featured_image | image_url: width: 1500 }} 1500w,{%- endif -%}
                {%- if card_collection.featured_image.width >= 3000 -%}{{ card_collection.featured_image | image_url: width: 3000 }} 3000w,{%- endif -%}
                {{ card_collection.featured_image | image_url }} {{ card_collection.featured_image.width }}w"
              src="{{ card_collection.featured_image | image_url: width: 1500 }}"
              sizes="
              (min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 100 | divided_by: columns }}px,
              (min-width: 750px) {% if columns > 1 %}calc((100vw - 10rem) / 2){% else %}calc(100vw - 10rem){% endif %},
              calc(100vw - 3rem)"
              alt=""
              height="{{ card_collection.featured_image.height }}"
              width="{{ card_collection.featured_image.width }}"
              border-radius= "50%"
              loading="lazy"
              class="motion-reduce"
            >
          </div>
          <div class="centered_title_onImg">
            <span>
              <a{% if card_collection == blank %} role="link" aria-disabled="true"{% else %} href="{{ card_collection.url }}"{% endif %} 
        style="text-decoration: none;color:white;font-size:30px;font-family: Arial, Helvetica, sans-serif;font-weight: bold;">
              {%- if card_collection.title != blank -%}
                {{- card_collection.title | escape -}}
              {%- else -%}
                {{ 'onboarding.collection_title' | t }}
              {%- endif -%}
              </a>
            </span>
          </div>
        </div>
        </div>
      {%- endif -%}

 Step 2:

In Assets/component-card.css, I added the centered_title_onImg style after the card__media, which controls the position and background-color of the title on the image:

.card__media .media img {
  height: 100%;
  object-fit: cover;
  object-position: center center;
  width: 100%;
}

.card__inner:not(.ratio) > .card__content {
  height: 100%;
}
/* New added */
.centered_title_onImg{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
/*   background-color: #F7F7F7; */
}

 The result was like(I didn't delete the original card__heading, just for testing):

[TheBeeStudio]

can you please let me know how can i get the collection name  like this on the image

[rogerjet]

Hi @Elsie-L,

With that solution can you click the image or only the text??

Thanks