Add shadows on Product Categories

Hi,

can i add a shadows like the second image attached?

because when add shadow on the widget it put on the container and not around the images.

tnx

Attachments:

You must be logged in to view attached files.

Hi andrea-5600,

Thank you for reaching to us.

Please navigate to Theme Settings > Product archive > Categories styles and enable Categories with shadow option https://prnt.sc/NS-4HkHMiaPx

Regards,

Hi,
there isn’t what you say…. is only for some category design… maybe can i add a css?

look at the photo

tnx

Attachments:

You must be logged in to view attached files.

Hi andrea-5600,

It works with two first designs only https://prnt.sc/6x8zSpVghAi8

Please add the following Custom CSS code to Theme Settings > Custom CSS > Global Custom CSS:

.wd-cats.wd-grid-f-col .wd-cat-inner{
	box-shadow: 10px 10px 10px 0 rgba(0,0,0,0.5);
}

Regards,

tnx work great!!!

and if i want add shadows in the gallery grid?

in this page?

tnx

Hi andrea-5600,

Please add the following Custom CSS code to Theme Settings > Custom CSS > Global Custom CSS:

.wd-gallery-item{
	box-shadow: 10px 10px 10px 0 rgba(0,0,0,0.5);
}

And you need to increase the gap between images.

Regards,

something wrong look the picture… a vertical white line come out and the edge are not rounded

Attachments:

You must be logged in to view attached files.

Hi andrea-5600,

Please try below CSS code

.wd-grid-f-col>.wd-col.wd-gallery-item{
	margin-right: 20px;
	padding: 0;
	box-shadow: 10px 10px 10px 0 rgba(0,0,0,0.5);
    width: 95%;
    flex: 0 0 calc(95% / var(--wd-col) * var(--wd-col-wider, 1));
    max-width: calc(95% / var(--wd-col) * var(--wd-col-wider, 1));	
}

.wd-grid-f-col>.wd-col.wd-gallery-item a {
    border-radius: var(--wd-brd-radius);
}

Regards,

ok now better, but not good border radius.

check picture

Attachments:

You must be logged in to view attached files.

Hi andrea-5600,

Please remove previous code and use below one

.wd-grid-f-col>.wd-col.wd-gallery-item{
	margin-right: 20px;
	padding: 0;
	box-shadow: 10px 10px 10px 0 rgba(0,0,0,0.5);
  width: 95%;
  flex: 0 0 calc(95% / var(--wd-col) * var(--wd-col-wider, 1));
  max-width: calc(95% / var(--wd-col) * var(--wd-col-wider, 1));	
}

.wd-grid-f-col>.wd-col.wd-gallery-item {
  border-radius: var(--wd-brd-radius);
}

Regards,

perfect tnx !!

its possible to zoom a little bit when i hover with the mouse?

Hi andrea-5600,

Please try below code

.wd-grid-f-col>.wd-col.wd-gallery-item{
	overflow: hidden;
}

.wd-grid-f-col>.wd-col.wd-gallery-item img{
	transition: transform .5s;
}

.wd-grid-f-col>.wd-col.wd-gallery-item:hover img{
  transform: scale(1.5);
}

Regards,

ok perfect for the zoom!!!

but i was wrong for last code…. saw that this code non put the shadow on picture yet! look at picture attached

.wd-grid-f-col>.wd-col.wd-gallery-item{
margin-right: 20px;
padding: 0;
box-shadow: 10px 10px 10px 0 rgba(0,0,0,0.5);
width: 95%;
flex: 0 0 calc(95% / var(–wd-col) * var(–wd-col-wider, 1));
max-width: calc(95% / var(–wd-col) * var(–wd-col-wider, 1));
}

.wd-grid-f-col>.wd-col.wd-gallery-item {
border-radius: var(–wd-brd-radius);
}

Attachments:

You must be logged in to view attached files.

Hi andrea-5600,

Please remove all above code and use below one:

.wd-grid-f-col>.wd-col.wd-gallery-item{
	margin-right: 20px;
	padding: 0;
	box-shadow: 10px 10px 10px 0 rgba(0,0,0,0.5);
  width: 95%;
  flex: 0 0 calc(95% / var(--wd-col) * var(--wd-col-wider, 1));
  max-width: calc(95% / var(--wd-col) * var(--wd-col-wider, 1));	
}

.wd-grid-f-col>.wd-col.wd-gallery-item {
  border-radius: var(--wd-brd-radius);
}

.wd-grid-f-col>.wd-col.wd-gallery-item{
	overflow: hidden;
}

.wd-grid-f-col>.wd-col.wd-gallery-item img{
	transition: transform .5s;
}

.wd-grid-f-col>.wd-col.wd-gallery-item:hover img{
  transform: scale(1.5);
}

Regards,

[Author]

Posts