Taste Theme- Homepage Collage Section- Apply CSS to a single element of the collage.

Taste Theme- Homepage Collage Section- Apply CSS to a single element of the collage.

KH2
Shopify Partner
5 0 0

Site is dizziak.com

 

On the homepage there is a collage section at the top. The DIZZIAK logo, we would like to apply a hover transformation onto it but I cannot for the life of me work out how to specify just that image in the CSS. I only seem to be able to apply to transformation to the whole section. (You can see the transformation effect here: https://codepen.io/hqdrone/pen/poyWNqX

 

Can anyone help me build out this custom CSS so it applies to the correct item?

 

The hover/transition CSS is 

 

WHAT IS THE IDENTIFIER HERE FOR JUST THAT IMAGE?{
transform:
perspective(800px)
rotateY(25deg) scale(0.9)
rotateX(10deg);
filter: blur(2px);
opacity: 0.5;
transition: 0.6s ease all;

&:hover {
transform:
perspective(800px)
rotateY(-15deg)
translateY(-50px)
rotateX(10deg)
scale(1);
filter: blur(0);
opacity: 1;
}
}

Replies 2 (2)

BSSCommerce-B2B
Shopify Partner
1972 564 564

Hi @KH2 ,

I have reviewed your requirement, you just need to edit css script and the issue will be resolved.  You can follow my instructions! 

Step 1: Go to Admin -> Online store -> Theme > Edit code:

BSSCommerceB2B_0-1724350862853.png

 

Step 2: Search for the file base.css. And add this code snippet to the end of the file.

.header__heading .header__heading-logo-wrapper {
    transform: perspective(800px) rotateY(25deg) scale(0.9) rotateX(10deg);
    filter: blur(2px);
    opacity: 0.5;
    transition: 0.6s ease all;
}

.header__heading .header__heading-logo-wrapper:hover {
    transform: perspective(800px) rotateY(-10deg) translateY(-50px) rotateX(10deg) scale(1);
    filter: blur(0);
    opacity: 1;
}

@media screen and (min-width: 990px) {
    .header {
        padding-top: 50px !important;
    }
}

Step 3: Save and reload home page.

 

I hope these instructions will help you. If they are helpful, please give us likes and mark as the solution.

Have a nice day sir! 

 

B2B Wholesale Solution: Streamline your B2B operation with advanced features like wholesale registration forms, custom pricing.


B2B Portal, Quote, Net 30: Speed up purchasing and streamline your quotation process with advanced features like quick order, request for quote.


B2B Lock Password Protect: Easily control access to pages, products, and pricing with robust features.


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

KH2
Shopify Partner
5 0 0

Thank you for this- and sorry I didn't see it/reply sooner. I've put that in place but don't see any difference, I'm afraid. Thank you for the suggestion though.