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

[KH2]

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;
}
}

[BSSCommerce-B2B]

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:

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!