mouse-overs in product categories, tweak?

hi there,

is there anybody who managed to tweak the esport template in a way that products within the categories get some mouse over effect?

please see what i mean here: http://www.zalando.nl/dameskleding-jurken/
(just move over the dresses... products get a box when hovered)

would be great to achieve something like this...

regards
emel

You can try below css code in your override.css file.

Code: Select all

.nspvm .nspArt > div:hover {
    border-color: #ddd!important;
    border-left: 1px solid #ddd !important;
}
.product:hover {
    box-shadow: 0 0px 4px rgba(0, 0, 0, 0.4);
}


See you around...

will def. try this.

i noticed within the NSP gk4 module, there are some parameters:

additional settings: hover animation. (ON), (it indicates that pagination has to be ENabled, so in the "links" tab, i use: pagination: arrows with pagination.

still nothing happens when doing a mouse over.... ?

(the original esport demo shows a very light transparancy when doing a mouse over...) ??

Demo uses following css code for hover on nsp products image. You can add it to your override.css if you are missing it.

Code: Select all

.nspArt img:hover {opacity: 0.85;}


See you around...

norman, sorry this (opacity) doesn't work. i've added this to the css/override.css file.... unfortunately no success...

fyi: the first method works like a charm (boxed border), BUT..... when you do a mouse over, the image and info's move 1 pixel to the left/right.....

is there a way to fix this?

THANX

Hi Emel,

Can you post your website link again so I can take a look.

See you around...

http://test.galaspecialist.nl/ (see below)

I only see 1 test item, I ll wait for you to enter more products then we ll check again as it seems you have started from fresh install again.

See you around...

yes, but already with this 1 test product you'll see the prices hovering 1 pixel to the right if you do a mouse over.... 1 or 6 items doesn't make any difference.

I didn't see any shifting in Firefox as it is only adding shadow to all sides that is why I suggested for you to add more products then we can see clearly and can make a suggestion.

See you around...

if you want to check i have now various pages with more products, the 1 pixel shift remains, also with firefox. it's hard to see, but it's there....

Please delete following from override.css

Code: Select all

.nspArt img:hover {
    opacity: 0.85;
}
.nspvm .nspArt > div:hover {
    border-color: #992F25 !important;
    border-left: 1px solid #992F25 !important;
}


Add following

Code: Select all

.nspvm .nspArt > div { border: 1px solid #EEEEEE;}
.nspvm .nspArt > div:hover { border-color: #992F25 !important;}


See you around...

almost... but not quite, now the left/right (depending how you measture it) remains grey.... i have tried to add
border-right: 1px solid #992f25 !important;

but that is without success, assumem there is another framework/table used to generate that particular border