Hovering in product list/gridview

1. All products get an event (hover?), even if the mouse is over the description not only the image.
This is in desktop and tablet modes, but not in smartphone.

2. Products without a "hover" marked image also get a dimmed picture. Want this to be disabled.
Even "hovered" images gets dimmed in list-view, but not in grid-view.

8 answers

Profile photo of Saguaros 0.00 $tone August 5, 2014
Public

Hi We add opacity for item when hovering, if you want to disable, please go to file: /skin/frontend/default/jm_summer/css/style.css

Find and comment or remove these css rule:

Code:

.category-page li.item:focus img.regular_img1,
.category-page li.item:hover img.regular_img1,
.products-grid li.item:focus img.regular_img1,
.products-grid li.item:hover img.regular_img1{
	filter: alpha(opacity=50);
	-khtml-opacity: 0.5;
	-moz-opacity: 0.5;
	opacity: 0.5;
}

.products-grid li.item:focus .product-image img,
.products-grid li.item:hover .product-image img {
	opacity: 0.5
}

Then clear magento cache.

#1
Profile photo of Sven Lessmann -30.00 $tone August 6, 2014
Public

Hello Saguaros,
thanks, it worked! But I found another one on the search result page:

Code:

.products-list li.item:focus .pro-image .product-image,
.products-list li.item:hover .pro-image .product-image {
	opacity: 0.5;
}

By the way -- we want to sell products, and we make the only optical hint for our customers worse?

This was one part of my question, the other one is hovering only over the picture not the whole product item in list/grid/searchresult view -- if there is a "hover" marked image. If the customer is focused on one product, he should primarily see the main image -- and not immediately the hover image.

#2
Profile photo of Saguaros 0.00 $tone August 6, 2014
Public

I’m sorry but I’m not quite clear of what you’re trying to achieve here. Can you illustrate the modifications you expect via screenshot? It’s better for giving you suggestion.

#3
Profile photo of Sven Lessmann -30.00 $tone August 7, 2014
Public

Ok, we get rid of the "dimming" of the product item in focus.
So I want to use only the "hover" effect, if the user moves the mouse over the main image.
This behaviour should be on every page with product lists, e.g. list/grid and searchresult pages.

In grid view: In demo store here is only "hovering"
http://prntscr.com/4advh7
In list view: In demo store here is "hovering" and "dimming"
http://prntscr.com/4adyjw
In search result view: (I mark this,because it maybe has other CSS styling)
http://prntscr.com/4adzw6

So the hover effect should only show, if the mouse is over the image part and not over the text part
of the product items in these lists.

#4
Profile photo of Saguaros 0.00 $tone August 11, 2014
Public

Hi

In grid view: In demo store here is only "hovering"
http://prntscr.com/4advh7

>> I’m not quite clear of what you want to achieve here, do you mean that you want to remove the hover effect when mouse over the product name?

In list view: In demo store here is "hovering" and "dimming"
http://prntscr.com/4adyjw

>> Do you mean that you want to set opacity for image only when hover the image part?

#5
Profile photo of Sven Lessmann -30.00 $tone August 12, 2014
Public

Hello Saguaros,
no I don’t want to set opacity at all (what we have archieved), I only want the hover effect over the image part not over the whole list/grid/search element.
Yes, I want to remove the hover effect when mouse over the product name etc., it should only show over the image part.
I only want to mark that the behavior of "hover" labled images is different in grid, list or search view, but I think it should be the same.

#6
Profile photo of Saguaros 0.00 $tone August 14, 2014
Public

You can try with my workaround here:
-- Open file: \skin\frontend\default\jm_summer\css\style.css
-- Line 4039
Replace:

Code:

.products-grid li.item:focus .product-image img,
.products-grid li.item:hover .product-image img {
	opacity: 0.5
}

With:

Code:

.products-grid li.item .product-image:focus img,
.products-grid li.item .product-image:hover img {
	opacity: 0.5
}

-- Line 4195
Replace:

Code:

.category-page li.item:focus img.regular_img1,
.category-page li.item:hover img.regular_img1,
.products-grid li.item:focus img.regular_img1,
.products-grid li.item:hover img.regular_img1{
	filter: alpha(opacity=50);
	-khtml-opacity: 0.5;
	-moz-opacity: 0.5;
	opacity: 0.5;
}

.category-page li.item:focus img.additional_img, 
.category-page li.item:hover img.additional_img,
.products-grid li.item:focus img.additional_img, 
.products-grid li.item:hover img.additional_img {
   filter: alpha(opacity=100);
	-khtml-opacity: 1;
	-moz-opacity: 1;
	opacity: 1;
	z-index: 99;
}

With:

Code:

.category-page li.item .product-image:focus img.regular_img1,
.category-page li.item .product-image:hover img.regular_img1,
.products-grid li.item .product-image:focus img.regular_img1,
.products-grid li.item .product-image:hover img.regular_img1{
	filter: alpha(opacity=50);
	-khtml-opacity: 0.5;
	-moz-opacity: 0.5;
	opacity: 0.5;
}


.category-page li.item .product-image:focus img.additional_img, 
.category-page li.item .product-image:hover img.additional_img,
.products-grid li.item .product-image:focus img.additional_img, 
.products-grid li.item .product-image:hover img.additional_img {
   filter: alpha(opacity=100);
	-khtml-opacity: 1;
	-moz-opacity: 1;
	opacity: 1;
	z-index: 99;
}

-- Line 4433
Replace:

Code:

.products-list li.item:focus .pro-image .product-image,
.products-list li.item:hover .pro-image .product-image {
	opacity: 0.5;
}

With:

Code:

.products-list li.item .pro-image .product-image:focus,
.products-list li.item .pro-image .product-image:hover{
	opacity: 0.5;
}

Then clear magento cache.

#7

This question is now closed

Written By

Comments