Border around product images « Support Forum | Kriesi.at

Border around product images

5 posts from 2 voices

Tags:

Ajb
Member

In the Abundance theme, when you hover over the product, there is a black border that pops up... Is there a way to get that in the Propulsion theme?

Posted 1 year ago #
Ajb
Member

..bump

Posted 1 year ago #
Mya
Hi Ajb,

There's two ways to go about this set the background color or add a border. Either way you'll want to add the code to your custom.css or Quick CSS.

Set the background color -
```
.thumbnail_container {
	background:#f8f8f8;
	padding:5px;
}

.thumbnail_container:hover {
	background:#2c3547;
}
```
This code will apply a background color to the container just like Abundance does. Notice I have two declarations .thumbnail_container and .thumbnail_container:hover. The first one is for the mouseoff or normal state. The second one is for the mouseover or hover state.

Add a border -
```
.thumbnail_container {
	border:5px solid #f8f8f8;
}

.thumbnail_container:hover {
	border:5px solid #2c3547;
}
```
This code will add a border around the image's container. Again, I've include a normal state and hover state. You'll only need to use .thumbnail_container:hover.

Hope this helps!

Regards,
Mya
Posted 1 year ago #
Ajb
Member

Great! It worked!!

Thank you

Posted 1 year ago #
Mya

Great! Let us know if you need more help!

Regards,
Mya

Posted 1 year ago #