How to display product titles on hover in the Symmetry theme?

Store Design
1

Currently I’m trying to migrate to the Symmetry theme & the option to have the title show up on hover(desktop) is not available for the collection page. Wonder if someone can help me figure out a code for it. Our current theme (Turbo) has this option right now.

Thanks in advanced!

2

Hi @affinitybands ,

Do you want to show content like this? Please confirm again

Screen Shot 2022-03-25 at 7.55.46 AM.png
Screen Shot 2022-03-25 at 7.55.46 AM.png2880×1800 637 KB

Thanks you

3

I want the content to be shown on Hover.

My new theme has it like picture currently.

https://x618f43hycdybeas-1611169866.shopifypreview.com

4

Hi @affinitybands ,

You can follow the instruction below:

  1. Go to Online Store->Theme->Edit code
  2. Asset->/styles.css->paste below code at the bottom of the file:
@media (min-width: 1200px) {
    .block-inner-inner {
        position: relative;
    }
    .block-inner-inner:before {
        content: '';
        position: absolute;
        height: 100%;
        width: 100%;
        background: #fff;
        z-index: 1;
        opacity: 0.5;
        left: 0;
        opacity: 0;
        transition: all 0.3s;
        pointer-events: none;
    }
    .block-inner-inner .product-info {
        position: absolute;
        top: 50%;
        transform: translatey(-50%);
        opacity: 0;
        transition: all 0.3s;
        z-index: 2;
        text-align: center;
        padding: 0 10px;
        pointer-events: none;
    }
    .block-inner-inner .product-info .product-link {
        text-align: center;
    }
    .block-inner-inner .product-info .product-price {
        justify-content: center;
    }
    .block-inner-inner:hover:before {
        opacity: 0.4;
    }
    .block-inner-inner:hover .product-info {
        opacity: 1;
    }
}

If you feel like my answer is helpful, please mark it as a SOLUTION. Let me know if you have any further questions.

5

Hi,

That didn’t do anything :confused:

6

Just had to place these directly under, I had a different custom code ontop of it that caused it not to work, but it worked when I switched them. Thanks!

7

How do I do this to the Collection list also?

8

Hi @affinitybands ,

You can try below code in styles.css file:

@media (min-width: 1200px) {
    .collection-listing .collection-block {
        position: relative;
    }
    .collection-listing .collection-block:before {
        content: '';
        position: absolute;
        height: 100%;
        width: 100%;
        background: #fff;
        z-index: 1;
        opacity: 0.5;
        left: 0;
        opacity: 0;
        transition: all 0.3s;
        pointer-events: none;
    }
    .collection-listing .collection-block .product-info {
        position: absolute;
        top: 50%;
        transform: translatey(-50%);
        opacity: 0;
        transition: all 0.3s;
        z-index: 2;
        text-align: center;
        padding: 0 10px;
        pointer-events: none;
        width: 100%;
    }
    .collection-listing .collection-block .product-info .product-link {
        text-align: center;
    }
    .collection-listing .collection-block .product-info .product-price {
        justify-content: center;
    }
    .collection-listing .collection-block:hover:before {
        opacity: 0.4;
    }
    .collection-listing .collection-block:hover .product-info {
        opacity: 1;
    }
}

Hope it can help you. ^^