Button on hover at product image.

IT Synergy
Topic Author
Offline

11 years 5 months ago #198048 by IT Synergy

Button on hover at product image. was created by IT Synergy

On the demopage 'display with badges' demo.hikashop.com/index.php/en/hikashop/.../display-with-badges , you have a hover with a order button. How can I establish that in my own template / shop?

Please Log in or Create an account to join the conversation.

Jerome
Offline
HikaShop core developer

11 years 5 months ago #198056 by Jerome

Replied by Jerome on topic Button on hover at product image.

Hi,

The effect is provided by the template thanks to some CSS.
The "add to cart" button is placed on the image but is hidden by default ; when the mouse is hover the product, the CSS will display the button with a little effect.

See : demo.hikashop.com/templates/jsn_glass_pr...jsn_ext_hikashop.css

Code:

.hikashop_products_listing_main .hikashop_subcontainer:hover .product-content .hikashop_product_stock .hikashop_cart_input_button {
	visibility: hidden;
	top: 38%;
	opacity: 1;
	filter: alpha(opacity=100);
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
	visibility: visible;
}

After that, it will be difficult to tell you, we are not designers.

Regards,

Jerome - Obsidev.com
HikaMarket & HikaSerial developer / HikaShop core dev team.

The following user(s) said Thank You: IT Synergy

Please Log in or Create an account to join the conversation.

tramber91
Offline

11 years 5 months ago #199164 by tramber91

Replied by tramber91 on topic Button on hover at product image.

Dear all

i have worked on this topic folllowing css of demo site

to succeed i used these css codes ('template rockettheme)
product layout : div
layout : picture + title

Code:

/* ----------- PRODUCT LISTING -----------* /
.hikashop_products_listing_main .hikashop_subcontainer {
	display: inline-block;
	padding: 0;
	position: relative;
	overflow: hidden;
	width: 100%;
}
.hikashop_products_listing_main .hikashop_subcontainer:hover .hikashop_product_image img {
	transform: scale(1.15,1.15);
}
.hikashop_product_image {
	padding-bottom: 0;
	overflow: hidden;
}
.hikashop_products_listing_main .hikashop_subcontainer .hikashop_product_image img {
	transition: all .5s;
	-moz-transition: all .5s;
	-webkit-transition: all .5s;
}
.hikashop_products_listing_main .hikashop_subcontainer .hikashop_product_image {
	position: relative;
	max-width: 100% !important;
}
.hikashop_products_listing_main .hikashop_subcontainer .hikashop_product_image:before {
	content: "";
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	z-index: 99;
	background: rgba(0,0,0,.6);
	visibility: hidden;
	opacity: 0;
	filter: alpha(opacity=0);
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
	transition: all .3s ease-in-out;
	-moz-transition: all .3s ease-in-out;
	-webkit-transition: all .3s ease-in-out;
}
.hikashop_products_listing_main .hikashop_subcontainer:hover .hikashop_product_image:before {
	visibility: visible;
	opacity: 1;
	filter: alpha(opacity=100);
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}

plus

Code:

.hikashop_products_listing_main .hikashop_cart_input_button {
	position: absolute;
	top: 30%;
	left: 40%;
	margin-left: -75px !important;
	opacity: 0;
	filter: alpha(opacity=0);
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
	z-index: 100;
	transition: all .5s ease-in-out;
	-moz-transition: all .5s ease-in-out;
	-webkit-transition: all .5s ease-in-out;
}

.hikashop_products_listing_main .hikashop_subcontainer:hover .hikashop_cart_input_button {
	visibility: hidden;
	top: 38%;
	opacity: 1;
	filter: alpha(opacity=100);
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
	visibility: visible;
}	

.hikashop_products_listing_main #hikashop_add_wishlist .hikashop_cart_input_button {
	position: absolute;
	top: 18%;
	left: 40%;
	margin-top: -17px !important;
	margin-left: -72px !important; 
	opacity: 0;
	filter: alpha(opacity=0);
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
	z-index: 100;
	transition: all .5s ease-in-out;
	-moz-transition: all .5s ease-in-out;
	-webkit-transition: all .5s ease-in-out;
}

.hikashop_products_listing_main .hikashop_subcontainer:hover .product-content #hikashop_add_wishlist .hikashop_cart_input_button {
	visibility: hidden;
	top: 25%;
	opacity: 1;
	filter: alpha(opacity=100);
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
	visibility: visible;
}


.hikashop_products_listing_main .hikashop_subcontainer:hover .hikashop_product_stock .hikashop_cart_input_button {
	visibility: hidden;
	top: 38%;
	opacity: 1;
	filter: alpha(opacity=100);
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
	visibility: visible;
}

you can play with
left: 40%;
to align your button

test here
www.tricotin.tramber9.o2switch.net/index...fils-fins-classiques

take care

Bertrand

www.en-toutes-lettres.fr/

The following user(s) said Thank You: IT Synergy

Please Log in or Create an account to join the conversation.

Time to create page: 0.202 seconds