Jump to content

Image hover over help


Glute

Recommended Posts

I am trying to create an image hover over with slow fade similar to what is found here but with an additional image instead of text. https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_image_overlay_fade

 

My code so far (will only be available until 6/6)

<div class="cta threeup">
<div class="container">
<div class="col-xs-6 col-sm-3">
<figure><a href="http://www.smithscity.co.nz/small-appliances.htm?filter=&amp;aspect=Hot+Deals%5eHot%20deals%20only&amp;aspect=Brand%5eSunbeam&amp;utm_medium=email&amp;utm_campaign=Queens%20Birthday&amp;utm_content=Queens%20Birthday+CID_e4b2a50b6c6670ec203395ba6043f22b&amp;utm_source=Email%20marketing%20software" target="_blank" title="40% off Sunbeam Appliances"><img src="/images/assetimages/Queens%20Birthday/Homepage.jpg" border="0" alt="40% off Sunbeam Appliances " title="40% off Sunbeam Appliances " width="99%" onmouseover="this.src='/images/assetimages/Queens%20Birthday/Lifestyles.jpg';" onmouseout="this.src='/images/assetimages/Queens%20Birthday/Homepage.jpg';"></a></figure>
</div>
<div class="col-xs-6 col-sm-3">
<figure><a href="http://www.smithscity.co.nz/heating-and-outdoors/heating-and-cooling/electric-blankets.htm?filter=&amp;aspect=Hot+Deals%5eHot%20deals%20only&amp;aspect=Brand%5eSunbeam&amp;utm_medium=email&amp;utm_campaign=Queens%20Birthday&amp;utm_content=Queens%20Birthday+CID_e4b2a50b6c6670ec203395ba6043f22b&amp;utm_source=Email%20marketing%20software" target="_blank" title="35% off Sunbeam Blankets"><img src="/images/assetimages/Queens%20Birthday/Homepage2.jpg" border="0" alt="35% off Sunbeam Blankets " title="35% off Sunbeam Blankets " width="99%" onmouseover="this.src='/images/assetimages/Queens%20Birthday/Lifestyles2.jpg ';" onmouseout="this.src='/images/assetimages/Queens%20Birthday/Homepage2.jpg ';"></a></figure>
</div>
<div class="col-xs-6 col-sm-3">
<figure><a href="http://www.smithscity.co.nz/appliances/refrigeration.htm?filter=&amp;aspect=Hot+Deals%5eHot%20deals%20only&amp;utm_medium=email&amp;utm_campaign=Queens%20Birthday&amp;utm_content=Queens%20Birthday+CID_e4b2a50b6c6670ec203395ba6043f22b&amp;utm_source=Email%20marketing%20software " target="_blank" title="20 &ndash; 30% off Refrigeration"><img src="/images/assetimages/Queens%20Birthday/Homepage3.jpg" border="0" alt="20 &ndash; 30% off Refrigeration" title="20 &ndash; 30% off Refrigeration" width="99%" onmouseover="this.src='/images/assetimages/Queens%20Birthday/Lifestyles3.jpg ';" onmouseout="this.src='/images/assetimages/Queens%20Birthday/Homepage3.jpg ';"></a></figure>
</div>
<div class="col-xs-6 col-sm-3">
<figure><a href="http://www.smithscity.co.nz/appliances/cooking.htm?filter=&amp;aspect=Hot+Deals%5eHot%20deals%20only&amp;utm_medium=email&amp;utm_campaign=Queens%20Birthday&amp;utm_content=Queens%20Birthday+CID_e4b2a50b6c6670ec203395ba6043f22b&amp;utm_source=Email%20marketing%20software " target="_blank" title="20 &ndash; 30% off Cooking"><img src="/images/assetimages/Queens%20Birthday/Homepage4.jpg" border="0" alt="20 &ndash; 30% off Cooking" title="20 &ndash; 30% off Cooking" width="99%" onmouseover="this.src='/images/assetimages/Queens%20Birthday/Lifestyles4.jpg ';" onmouseout="this.src='/images/assetimages/Queens%20Birthday/Homepage4.jpg ';"></a></figure>
</div>
</div>

 

Edited by Glute
Link to comment
Share on other sites

That is different to what you want, it changes opacity of an overlapping element on hover of image, you can't make image opacity: 0; to hide because you need to see the original image first before changing to the alternative image.

The better option is to use animation which is triggered on hover which will result in on hover, the image being changed, and the effect of setting opacity to 0 and gradually resetting to 1, resulting in  fading the alternative image.

            @keyframes example {
                from {opacity:0;}
                to {opacity:1;}
            }

            .cta.threeup figure a img:hover {
                animation-name: example;
                animation-duration: 1s;
            }

 

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...