Shopify themes, liquid, logos, and UX
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;
}
}
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!
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
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.
Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025Expand into selling wholesale with Shopify Academy’s learning path, B2B on Shopify: Lau...
By Shopify Jan 28, 2025