Button on hover at product image.

  • Posts: 2
  • Thank you received: 0
9 years 3 weeks ago #198048

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.

  • Posts: 26017
  • Thank you received: 4004
  • MODERATOR
9 years 3 weeks ago #198056

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 

.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.

Also helping the HikaShop support team when having some time or couldn't sleep.
By the way, do not send me private message, use the "contact us" form instead.
The following user(s) said Thank You: IT Synergy

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

  • Posts: 119
  • Thank you received: 6
9 years 2 weeks ago #199164

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

/* ----------- 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
.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.070 seconds
Powered by Kunena Forum