How can I achieve this centre price affect when hovered on desktop

f22london1
Excursionist
24 1 1

I want to achieve a similar affect to this image where only on desktop the prices and title appear in the middle of the product image when hovered and the image goes slightly white. I only want this to occur on desktop and stay the same as it is on mobile. 

 

How can I achieve this,

 

JoeScreenshot 2024-05-09 161121.png

 

Replies 10 (10)

f22london1
Excursionist
24 1 1

my website is f22london.com and password is password123

pritom
Shopify Partner
6 0 2

Hi @f22london1 !!
I faced the same issue you are facing right now. For this you need to know the theme customization. But I do not have the knowledge of that earlier. So I came up with an silly idea which worked for me.
When you add product you can add an image which contains prices and title appear in the middle of the product. and tick "Show second image on hover". 

pritom_0-1715269527261.png

This method has many issues which will arise when changing the price, in your case it will also appear in mobile also.

 

Through it is not the solution but this will buy you some time.

 

f22london1
Excursionist
24 1 1

Does this mean you can hide the price below, and the photo which comes on the listing

BSSTech-Venture
Shopify Expert
334 78 82

Hi @f22london1 

 

We've carefully checked your problem and found that it's quite complicated. So we suggest hiring a developer.

 

It's what we can help with an optimal solution. If you need help from our expert, kindly share your request with us via Shopify experts: https://experts.shopify.com/bss-commerce/services?utm_source=Shopify+Community&utm_medium=Post+reply...

 

We will check it and give you a detailed solution. We're looking forward to working with you.

If our suggestions are useful, please let us know by giving it a like or marking it as a solution.

For B2B solutions and custom pricing, check out B2B Solution & Custom Pricing |
For adding product labels/badges, visit Product Labels by BSS

BSS Commerce - Shopify Apps & Store Development Service Provider

Hire a Shopify expert | Shopify Plus Store Development

f22london1
Excursionist
24 1 1

fair - what are you rates

ThePrimeWeb
Shopify Partner
2057 594 466

Hey @f22london1,

 

Go to your theme's "Edit Code" Option, then in the search bar type "theme.liquid"
Below the tag "<head>" tag paste the following. Screenshot attached for reference.

 

<style>
@media only screen and (min-width: 990px) {
    .card.card--standard.card--media {
        position: relative !important;
    }
    
    .card.card--standard.card--media:hover:before{
        background-color: rgba(255,255,255, 0.4) !important;
        content: '' !important;
        width: 100% !important;
        height: 100% !important;
        display: block !important;
        position: absolute !important;
        z-index: 2 !important;
    }
    
    .card__content {
        position: absolute !important;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100% !important;
        opacity: 0 !important;
        z-index: 3 !important;
        height: 100%;
    }
    
    .card.card--standard.card--media:hover .card__content {
        opacity: 1 !important;
    }
    
    .card__content * {
        text-decoration: none !important;
        text-align: center !important;
    }
}
</style>

 

 

Screenshot is for reference only, the correct code to paste is the one shown above.

ThePrimeWeb_0-1715465251944.jpeg

 

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!
f22london1
Excursionist
24 1 1

Hi this works would this be possible to do with the triangles on my home page aswell ? 

ThePrimeWeb
Shopify Partner
2057 594 466

Hey @f22london1,

 

Go to your theme's "Edit Code" Option, then in the search bar type "theme.liquid"
Below the tag "<head>" tag paste the following. Screenshot attached for reference.

<style>
@media only screen and (min-width: 990px) {
    .multicolumn-card.content-container {
        position: relative !important;
    }
    
    .multicolumn-card__info {
        position: absolute !important;
        height: 100% !important;
        width: 100% !important;
        top: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        opacity: 0 !important;
        z-index: 3 !important;
    }
    
    .multicolumn-card.content-container:hover .multicolumn-card__info {
        opacity: 1 !important;
    }
    
    .multicolumn-card.content-container:before {
        content: '' !important;
        transition: all 200ms !important;
    }
    .multicolumn-card.content-container:hover:before {
        content: '' !important;
        height: 100% !important;
        width: 100% !important;
        position: absolute !important;
        left: 0 !important;
        top: 0 !important;
        background-color: rgba(255,255,255,0.4) !important;
        z-index: 2 !important;
    }
}
</style>

 

Screenshot is for reference only, the correct code to paste is the one shown above.

ThePrimeWeb_0-1715509100603.jpeg

 

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!
f22london1
Excursionist
24 1 1

Thankyou this worked perfectly, Is there a way I can make the the text in the centre of the triangles on desktop much larger so it is more visible but remain 10 px on desktop and aswell can the opacity of the triangles be much greater as to emulate the opacity on palaceskateboards.com 

ThePrimeWeb
Shopify Partner
2057 594 466

In the previous code I gave you the circled part is the intensity of the opacity, 0 means 0% and 1 means 100%. Change however you want.

ThePrimeWeb_0-1715510408799.png

 

 

For the font size, just paste this code

 

<style>
@media only screen and (min-width: 990px) {
    .multicolumn-card .multicolumn-card__info a {
        font-size: 20px !important;
    }
}
</style>

 

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!