{"title":"Image \u0026 Logo Hover Effect","description":"\u003cp\u003eImage \u0026amp; Logo Hover Effect work for Shopify and Shopify Plus stores, handled as a flat-rate task by an in-house team that has worked on this since 2016.\u003c\/p\u003e\u003cp\u003eWe have completed 78 image \u0026amp; logo hover effect requests for merchants, including work on Launch and Turbo. Typical turnaround is 1 to 2 business days. Below are 3 real examples with the request, the approach and what shipped.\u003c\/p\u003e","products":[{"product_id":"second-image-on-hover-launch","title":"Second Image on Hover","description":"\u003cp class=\"task-lead\"\u003eA decor brand redesigning their site wanted product tiles to show a second image on hover, on collection pages and in the related products section.\u003c\/p\u003e\u003ch2\u003eThe request\u003c\/h2\u003e\u003cblockquote\u003e\n\u003cp\u003eI'm interested in changing the image on hover. When someone hovers over a product on the collection page, show the second product image. Same in the You May Also Like area.\u003c\/p\u003e\n\u003ccite\u003eOriginal customer request, anonymized\u003c\/cite\u003e\n\u003c\/blockquote\u003e\u003cp\u003eProducts photographed in context and on white. Showing both from the grid let customers see more without clicking.\u003c\/p\u003e\u003ch2\u003eThe approach\u003c\/h2\u003e\u003cp\u003eWe added a second-image hover to product tiles on collection pages and in the related products section. Tiles fade between the two images. On touch devices the first image stays put so nothing flickers.\u003c\/p\u003e\u003ch2\u003eWhat we shipped\u003c\/h2\u003e\u003cul\u003e\n\u003cli\u003eSecond-image hover on collection tiles\u003c\/li\u003e\n\u003cli\u003eSame behavior in related products\u003c\/li\u003e\n\u003cli\u003eSmooth fade between images\u003c\/li\u003e\n\u003cli\u003eTouch devices unaffected\u003c\/li\u003e\n\u003c\/ul\u003e","brand":"TaskHusky Portfolio","offers":[{"title":"Default Title","offer_id":44155677311050,"sku":"TASK-0124","price":0.0,"currency_code":"USD","in_stock":false}]},{"product_id":"quick-view-button-reveal-on-hover-launch","title":"Quick View Button Reveal on Hover","description":"\u003cp class=\"task-lead\"\u003eA skincare brand wanted a colored border and a quick view button to appear when hovering product cards.\u003c\/p\u003e\u003ch2\u003eThe request\u003c\/h2\u003e\u003cblockquote\u003e\n\u003cp\u003eCreate a colored border on product listing hover, and a quick view button that reveals on the same hover. Like the reference site.\u003c\/p\u003e\n\u003ccite\u003eOriginal customer request, anonymized\u003c\/cite\u003e\n\u003c\/blockquote\u003e\u003cp\u003eA hover interaction from a competitor the brand admired.\u003c\/p\u003e\u003ch2\u003eThe approach\u003c\/h2\u003e\u003cp\u003eWe added a hover state to product cards with the brand's border color and a quick view button that appears in the same motion. Touch devices show the button without hover.\u003c\/p\u003e\u003ch2\u003eWhat we shipped\u003c\/h2\u003e\u003cul\u003e\n\u003cli\u003eColored border on card hover\u003c\/li\u003e\n\u003cli\u003eQuick view button reveals on hover\u003c\/li\u003e\n\u003cli\u003eButton always visible on touch devices\u003c\/li\u003e\n\u003c\/ul\u003e","brand":"TaskHusky Portfolio","offers":[{"title":"Default Title","offer_id":44155694547018,"sku":"TASK-0284","price":0.0,"currency_code":"USD","in_stock":false}]},{"product_id":"logo-and-icon-hover-color-change-turbo","title":"Logo and Icon Hover Color Change","description":"\u003cp class=\"task-lead\"\u003eA brand's collection cards showed the lowest variant price on hover, which misled customers. They wanted the hover text changed.\u003c\/p\u003e\u003ch2\u003eThe request\u003c\/h2\u003e\u003cblockquote\u003e\n\u003cp\u003eThe hover effect on products displays the lowest price variation. Customers think that's the price and get surprised. Change the hover to show the price range or from price.\u003c\/p\u003e\n\u003ccite\u003eOriginal customer request, anonymized\u003c\/cite\u003e\n\u003c\/blockquote\u003e\u003cp\u003eMisleading price display on hover.\u003c\/p\u003e\u003ch2\u003eThe approach\u003c\/h2\u003e\u003cp\u003eWe changed the hover state to show a from price for products with variant pricing and the exact price for single-price products.\u003c\/p\u003e\u003ch2\u003eWhat we shipped\u003c\/h2\u003e\u003cul\u003e\n\u003cli\u003eHover shows from price for variant-priced products\u003c\/li\u003e\n\u003cli\u003eExact price for single-price products\u003c\/li\u003e\n\u003cli\u003eConsistent with the product page\u003c\/li\u003e\n\u003c\/ul\u003e","brand":"TaskHusky Portfolio","offers":[{"title":"Default Title","offer_id":44155696447562,"sku":"TASK-0322","price":0.0,"currency_code":"USD","in_stock":false}]}],"url":"https:\/\/www.taskhusky.com\/collections\/image-logo-hover-effect.oembed","provider":"TaskHusky","version":"1.0","type":"link"}