How to add hover image in theme.liquid file in Shopify

Question

i was looking to find out how i can add a different image when i hover over a particular image in Shopify. I currently have the following code in my theme.liquid file, but i am not sure how i can add some mouseover code to show a different image.

<div class="site-header__phone">
                <a href="tel:123456789">{{ 'phone-icon.png' | asset_url | img_tag }} </a>
              </div>

Mostafa,

The following is what i have wrote as it is a hover on an icon that i am adding and not a product, but the page shows " /> " /> which is incorrect..

<div class="site-header__phone">
                <a href="tel:123456789">
                  <img class="phone" src="{{ 'phone-icon.png' | asset_url | img_tag }}" /> 
                  <img class="phone_hover" src="{{ 'phone-icon-h.png' | asset_url | img_tag }}" />
                </a>
              </div>

and the css being:

.site-header__phone {
  margin-top:6px;
  margin-left:15px;
}

.site-header__phone a img.phone_hover { display: none; }
.site-header__phone a:hover img.phone { display: none; }
.site-header__phone a:hover img.phone_hover { display: block; }

any ideas where i have gone wrong?

Answer 1

try this hope it will work for you. Give the Html part like this

    <div class="image">
  <a href="{{ url }}">
     <img class="first" src="{{ product.images[0] | product_img_url: 'large' }}" alt="{{ product.title | escape  }}" />
     <img class="second" src="{{ product.images[1] | product_img_url: 'large' }}" alt="{{ product.title | escape  }}" />
   </a>
</div> 

And styles.css stylesheet like this

.product .image a img.second { display: none; }
.product .image a:hover img.first { display: none; }
.product .image a:hover img.second { display: block; }