How to add hover image in theme.liquid file in Shopify
<p>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.</p>

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

<p>Mostafa,</p>

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

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

<p>and the css being:</p>

<pre><code>.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; }
</code></pre>

<p>any ideas where i have gone wrong?</p>