feature box hover scale/zoom drop-shadow

3 replies · opened Aug 14, 2017

JjogjandrewAug 14, 2017

Hello,

Your new "pets" niche demo has a feature box with a hover with scale-up/zoom with a drop shadow. Can you share the code? I can't figure it out from the source.

Thanks.
Andrew

JjogjandrewAug 15, 2017

Can you help?

SSemicolon WebSTAFFAug 15, 2017

Hello,

You can find this code in the demos/pet/pet.css File. Simply use the following code:

.feature-box.media-box.fbox-bg {
	-webkit-transform: scale(1);
	-ms-transform: scale(1);
	-o-transform: scale(1);
	transform: scale(1);
	box-shadow: 0 1px 1px 0 rgba(10, 16, 34, .2);
	-webkit-transition: all 200ms ease;
	-o-transition: all 200ms ease;
	transition: all 200ms ease;
	border-radius: 5px;
}

.feature-box.media-box.fbox-bg:hover {
	box-shadow: 0 10px 30px -5px rgba(10, 16, 34, .2);
	-webkit-transform: scale(1.05);
	-ms-transform: scale(1.05);
	-o-transform: scale(1.05);
	transform: scale(1.05);
}

This will definitely work fine. Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

JjogjandrewAug 27, 2017

Working now. Thank you!

Have the same question, or something new?

Sign in to the Canvas dashboard to reply or open your own topic. Canvas owners get direct help from the SemiColonWeb team.

Reply on the dashboard