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

f22london1 · ‎05-09-2024

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,

Joe

f22london1 · ‎05-09-2024

my website is f22london.com and password is password123

pritom · ‎05-09-2024

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".

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 · ‎05-09-2024

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

BSSCommerce-HDL · ‎05-10-2024

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.

Sale banner, pop ups: Customize your sale banner, pop-ups and create countdown bar to boost conversion rate.
Simicart: Transform your Shopify store into a stunning and fully functional mobile app with just a few simple steps.
Product Labels & Badges: Get more sales with striking labels, badges, and banners from our 10,000+ available templates.

BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now

f22london1 · ‎05-11-2024

fair - what are you rates

ThePrimeWeb · ‎05-11-2024

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.

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 · ‎05-12-2024

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

ThePrimeWeb · ‎05-12-2024

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.

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 · ‎05-12-2024

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 · ‎05-12-2024

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.

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!

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