Glute Posted May 31, 2017 Share Posted May 31, 2017 (edited) 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=&aspect=Hot+Deals%5eHot%20deals%20only&aspect=Brand%5eSunbeam&utm_medium=email&utm_campaign=Queens%20Birthday&utm_content=Queens%20Birthday+CID_e4b2a50b6c6670ec203395ba6043f22b&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=&aspect=Hot+Deals%5eHot%20deals%20only&aspect=Brand%5eSunbeam&utm_medium=email&utm_campaign=Queens%20Birthday&utm_content=Queens%20Birthday+CID_e4b2a50b6c6670ec203395ba6043f22b&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=&aspect=Hot+Deals%5eHot%20deals%20only&utm_medium=email&utm_campaign=Queens%20Birthday&utm_content=Queens%20Birthday+CID_e4b2a50b6c6670ec203395ba6043f22b&utm_source=Email%20marketing%20software " target="_blank" title="20 – 30% off Refrigeration"><img src="/images/assetimages/Queens%20Birthday/Homepage3.jpg" border="0" alt="20 – 30% off Refrigeration" title="20 – 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=&aspect=Hot+Deals%5eHot%20deals%20only&utm_medium=email&utm_campaign=Queens%20Birthday&utm_content=Queens%20Birthday+CID_e4b2a50b6c6670ec203395ba6043f22b&utm_source=Email%20marketing%20software " target="_blank" title="20 – 30% off Cooking"><img src="/images/assetimages/Queens%20Birthday/Homepage4.jpg" border="0" alt="20 – 30% off Cooking" title="20 – 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 May 31, 2017 by Glute Link to comment Share on other sites More sharing options...
dsonesuk Posted May 31, 2017 Share Posted May 31, 2017 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 More sharing options...
Glute Posted May 31, 2017 Author Share Posted May 31, 2017 Could you please show me an example of where this code should be used with the image tags please Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now