[Skip to main content](#vessel-content) # Button on hover at product image. ## - **[IT Synergy](/forum/user/35971-it-synergy "View IT Synergy's Profile")** - [![IT Synergy's Avatar](https://www.hikashop.com/media/kunena/core/svg/person.svg)](/forum/user/35971-it-synergy "View IT Synergy's Profile") Topic Author - [ Offline](/forum/user/35971-it-synergy) Less More - Posts: 2 - Thank you received: 0 - - 11 years 6 months ago [\#198048](#198048) by [IT Synergy](/forum/user/35971-it-synergy "View IT Synergy's Profile") *[Button on hover at product image.](/forum/26-product-category-display/876294-button-on-hover-at-product-image#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?")* was created by *[IT Synergy](/forum/user/35971-it-synergy "View IT Synergy's Profile")* On the demopage 'display with badges' [ demo.hikashop.com/index.php/en/hikashop/.../display-with-badges](http://demo.hikashop.com/index.php/en/hikashop/products-listing/display-with-badges), you have a hover with a order button. How can I establish that in my own template / shop? Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtL3Byb2R1Y3QtY2F0ZWdvcnktZGlzcGxheS84NzYyOTQtYnV0dG9uLW9uLWhvdmVyLWF0LXByb2R1Y3QtaW1hZ2U/dG1wbD1tYXJrZG93bg==) or [Create an account](/component/users/registration?Itemid=101) to join the conversation. - **[Jerome](/forum/user/80-jerome "View Jerome's Profile")** - [![Jerome's Avatar](https://www.hikashop.com/media/kunena/avatars/resized/size144/users/avatar80.png)](/forum/user/80-jerome "View Jerome's Profile") - [ Offline](/forum/user/80-jerome) - HikaShop core developer Less More - Posts: 26394 - Thank you received: 4078 - - [](http://obsi.dev) - 11 years 6 months ago [\#198056](#198056) by [Jerome](/forum/user/80-jerome "View Jerome's Profile") Replied by *[Jerome](/forum/user/80-jerome "View Jerome's Profile")* on topic *[Button on hover at product image.](/forum/26-product-category-display/876294-button-on-hover-at-product-image#198056 "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?")* 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](http://demo.hikashop.com/templates/jsn_glass_pro/ext/hikashop/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](/forum/user/35971-it-synergy "View IT Synergy's Profile") Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtL3Byb2R1Y3QtY2F0ZWdvcnktZGlzcGxheS84NzYyOTQtYnV0dG9uLW9uLWhvdmVyLWF0LXByb2R1Y3QtaW1hZ2U/dG1wbD1tYXJrZG93bg==) or [Create an account](/component/users/registration?Itemid=101) to join the conversation. - **[tramber91](/forum/user/82-tramber91 "View tramber91's Profile")** - [![tramber91's Avatar](https://www.hikashop.com/media/kunena/avatars/resized/size144/users/avatar_2012-12-10.png)](/forum/user/82-tramber91 "View tramber91's Profile") - [ Offline](/forum/user/82-tramber91) Less More - Posts: 119 - Thank you received: 6 - - [](http://www.en-toutes-lettres.fr) - 11 years 6 months ago [\#199164](#199164) by [tramber91](/forum/user/82-tramber91 "View tramber91's Profile") Replied by *[tramber91](/forum/user/82-tramber91 "View tramber91's Profile")* on topic *[Button on hover at product image.](/forum/26-product-category-display/876294-button-on-hover-at-product-image#199164 "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?")* 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](http://www.tricotin.tramber9.o2switch.net/index.php/boutique/categorie/13-fils-fins-classiques) take care Bertrand --- [ www.en-toutes-lettres.fr/](http://www.en-toutes-lettres.fr/) The following user(s) said Thank You: [IT Synergy](/forum/user/35971-it-synergy "View IT Synergy's Profile") Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtL3Byb2R1Y3QtY2F0ZWdvcnktZGlzcGxheS84NzYyOTQtYnV0dG9uLW9uLWhvdmVyLWF0LXByb2R1Y3QtaW1hZ2U/dG1wbD1tYXJrZG93bg==) or [Create an account](/component/users/registration?Itemid=101) to join the conversation. Board Categories HikaShop- Install & Update- Product & Category Display- Content Creation- Sales and Orders- - Orders management- - Reports & Statistics- Customers- Checkout- Payment Methods- Shipping Methods- Import & Export (CSV, XLS…)- Specific Features- - Affilation- - Taxes- - Wishlist- - Vote- - Carousel & Slider- - Mass Actions- - Filters & Search- - Discount & Coupon- - Feature Request- Integrations- Showcase- General Talk about HikaShop- Development- - HikaShop 3.0 Beta- Translation- Commercial Jobs HikaShop Components- HikaMarket- - Market: Feature requests- - Market: How to?- - Market: Bug Report- HikaSerial- - General talk about HikaSerial- - Serial: Bug Report- - Serial: How to?- - Support en Français de HikaSerial (French Support)- - HikaSubscription- HikaAuction- - Auction: Feature requests- - Auction: How to?- - Auction: Bug report Hikashop around the world- Support en Français (French Support)- Russian- - FAQ. Курс выживания с Hikashop. Частые вопросы и о- - Расширения Hikashop- - Наши сайты на Hikashop- 日本語版サポート(Japanese Support)- Thai- German Archives- Bug Report- How to? [](/forum/topics/feed/mode-topics?format=feed&type=rss) Time to create page: 0.202 seconds [Powered by](/forum/credits) [Kunena Forum](https://www.kunena.org) [](#top)