People use image hover effects to gain attention or increase attraction to items on a page. A hover effect would be useful on your Shopify collection pages because it would draw your shoppers in and potentially increase interest in your products.
HTML and CSS are two seminal web scripting languages for constructing web pages and applications. You can use HTML to create image hover, CSS, or both CSS and HTML. HTML provides a web page’s structure, while CSS dictates layout and style.
There are many different types of hover effects you can execute with CSS code. CSS is an indispensable tool that makes sites more fun and exciting, as well as aesthetically pleasing. Hover effect simply means that when you move your cursor over an item, something happens. You can change your background color, bold or underline text, change font or font size, fade-in, change color, and shrink. For our purposes, we will be focusing on hover image change CSS.
Shopify Change Image on Hover
Have you ever wanted a feature on your Shopify store’s product page that changes images when the customer hovers over them? Now you can have one. In this tutorial, you will learn how to add a mouse hover effect in CSS.
A hover image effect will show one image on your product page, then another picture when you hover over it with your mouse. Add value to your store by using a Shopify mouse hover image effect.
How to Make Product Image Change When Mouse Hover in Shopify
Step 1: Duplicate your live theme
From your Shopify admin, go to your Online store and choose themes. Next to the live theme click on Actions and select Duplicate. This way, you will have a backup of your live theme if you miss some step that negatively impacts your store.
Step 2: Assets Directory
Now that you have a backup version of your live theme, click on Actions again, but this time choose edit code. From the navigation to the left, scroll down to the Assets directory and select theme.scss.liquid.
Scroll down to the bottom of the file and paste the following code:
/* ===============================================
// Reveal module
// =============================================== */
.has-secondary.grid-view-item__link img.secondary{
display:none;
}
.has-secondary.grid-view-item__link:hover img.secondary{
display:block;
}
.has-secondary.grid-view-item__link:hover img.grid-view-item__image{
display:none;
}
@media screen and (min-width:767px){
.has-secondary.grid-view-item__link img.secondary{
display:none;
}
.has-secondary.grid-view-item__link:hover img.secondary{
display:block;
}
.has-.grid-view-item__link:hover img.grid-view-item__image{
display:none;
}
}
secondary
@media screen and (max-width:767px){
.has-secondary.grid-view-item__link img.secondary{
display:none;
}
}
Click on Save.
Step 3: Snippets directory
In the Snippets directory open product-card-grid.liquid. Remove all the code and paste the following:
{%- assign grid_image_width = '600x600' -%}
{% endunless %}
<div class="grid-view-item{% unless product.available %} product-price--sold-out grid-view-item--sold-out{% endunless %}">
<a class="grid-view-item__link {% if product.images.size > 1 %} has-secondary{% endif %}" href="{{ product.url | within: collection }}">
<img class="grid-view-item__image" src="{{ product.featured_image.src | img_url: grid_image_width }}" alt="{{ product.featured_image.alt }}">
{% if product.images.size > 1 %}
<img class="secondary" src="{{ product.images.last | img_url: grid_image_width }}" alt="{{ product.images.last.alt | escape }}">
{% endif %}
<div class="h4 grid-view-item__title">{{ product.title }}</div>
{% if section.settings.show_vendor %}
<div class="grid-view-item__vendor">{{ product.vendor }}</div>
{% endif %}
<div class="grid-view-item__meta">
{% include 'product-price', variant: product %}
</div>
</a>
</div>
Click on Save
Shopify Product Image Change on Hover
Now you have learned how to create a hover image CSS, hover image HTML, or hover image HTML CSS. This fantastic new feature is sure to generate more interest in your products and store, yielding more conversions for you. For more information or if you have questions, don’t hesitate to contact Ecomexperts.