Kurt Mehnert commented on show a different image on product mouseover in product loop

RE: In response to Van Grenquist:

I'm not sure how you succeeded in fixing your problem. I'm having the same issue. Where does this inline block code go to hide the second image on the minimal theme?

So far I have managed this:

<!-- Begin promo images --><div class="row" id="fp-images" style="margin-bottom:25px">
  {% for i in (1..3) %}
  {% capture fp_image %}fp_image_{{ i }}.jpg{% endcapture %}
  {% capture fp_image_hover %}fp_image_hover_{{ i }}.jpg{% endcapture %}
  {% capture fp_link %}fp_image_{{ i }}_link{% endcapture %}
  {% capture fp_alt %}fp_image_{{ i }}_alt{% endcapture %}<div class="span4"><a href="{{ settings[fp_link] }}"><img src="{{ fp_image | asset_url }}" alt="{{ settings[fp_alt] | escape }}" /><img src="{{ fp_image_hover | asset_url }}" alt="{{ settings[fp_alt] | escape }}" /></a></div>
  {% endfor %}</div><!-- End promo images -->

but where do I add this line of code into the existing code to make the second image hide by default until hovered?

<style type="text/css">
.promo img:first-child{ display:inline-block;}
.promo img:last-child{ display:none;}

.promo:hover img:first-child{ display:none;}
.promo:hover img:last-child{ display:inline-block;}
</style>

Thanks.

**Nevermind, I figured it out. I added this code below to styles.css.liquid 

.foo img:last-child{display:none}
.foo:hover img:first-child{display:none}
.foo:hover img:last-child{display:inline-block}

and edited:

<!-- Begin promo images --><div class="row" id="fp-images" style="margin-bottom:25px">
  {% for i in (1..3) %}
  {% capture fp_image %}fp_image_{{ i }}.jpg{% endcapture %}
  {% capture fp_image_hover %}fp_image_hover_{{ i }}.jpg{% endcapture %}
  {% capture fp_link %}fp_image_{{ i }}_link{% endcapture %}
  {% capture fp_alt %}fp_image_{{ i }}_alt{% endcapture %}<div class="span4"><a class="foo" href="{{ settings[fp_link] }}"><img src="{{ fp_image | asset_url }}" alt="{{ settings[fp_alt] | escape }}" /><img src="{{ fp_image_hover | asset_url }}" alt="{{ settings[fp_alt] | escape }}" /></a></div>
  {% endfor %}</div><!-- End promo images -->