CODEWITHSUNDEEP
javascriptjquerycssimage
IamLasse
IamLasse

Reputation: 123

Remove image background with Javascript/jQuery

I came across this site http://skincity.se/sv/product/1198/md-formulations-vit-a-plus-hand-body-creme and wanted to copy the way they have removed the background color from the product images. How do they do it? It seems they are doing it on the frontend, since all images are with white background color...

Upvotes: 1

Views: 6612

Answers (2)

rooney
rooney

Reputation: 947

They are placing a semi-transparent overlay overtop the image. See their CSS:

#primary-image-node-overlay {
    background-color: black;
    opacity: 0.08;
    filter: alpha(opacity = 8) !important;
}

Upvotes: 2

Jordan Koschei
Jordan Koschei

Reputation: 31

I thought you were right about JavaScript, until I tried disabling it and refreshing the page - if you try that, you'll find that the effect remains.

It's actually some CSS trickery. The grayish background is actually above the image - it has a black background with an opacity of 0.08. It appears to be a gray background, when in fact it is a semi-transparent foreground.

Hope that helps!

Upvotes: 2

Related Questions