Crafty Product Hover Effect

[whitemedia]

Hi,

In Design Cloud, the Crafty website has a hover effect when you hover over a product in the shop page. How can I achieve the same effect using the latest Pro release? Would you be able to guide me through the steps of achieving it please? If possible with the Effects controls, rather than CSS.

Many thanks,
Christopher

[prakash_s]

Hello Christopher,

Thanks for writing to us.

It can be achieved by using custom CSS, You need to add this custom CSS under X–Theme Option -->CSS

.entry-product:hover {
box-shadow: 0 2.8px 2.2px rgba(0,0,0,0.02), 0 6.7px 5.3px rgba(0,0,0,0.028), 0 12.5px 10px rgba(0,0,0,0.035), 0 22.3px 17.9px rgba(0,0,0,0.042), 0 41.8px 33.4px rgba(0,0,0,0.05), 0 100px 80px rgba(0,0,0,0.07);
}
.entry-product {
transition-duration: 0.3s;
transition-property: box-shadow;
transition-timing-function: ease-in-out;
}

Please note that the code provided above serves as a guide only and is to help you in getting started so implementing it and maintaining the code will be out of our support scope and for further maintenance for new possible versions of the theme that may cause the customization to break, you will need to hire a developer.

CSS Crash Course For Absolute Beginners

How to Inspect Website Elements With Your Web Browser

Thanks

[whitemedia]

Thanks Prakash,

I appreciate the CSS you sent. I had really wondered if those effects can be achieved by the new Pro 4.0.x Effects feature, or is it only through CSS?

Thanks and happy New Year,
Christopher

[tristup]

Hi Christopher,

You can achieve that by using the Effect module options of the latest version Pro. Please find the screenshot below with the options and the video which shows how it works.

https://www.awesomescreenshot.com/video/2234510?key=e652529c88a7e802c02340269cb8adbb

Please find the video on how to learn how to use the effect module works:

Themeco 101: Effects Module

Hope it helps.
Thanks