Change Photo on Hover in SmugMug


If you want to change a single photo on hover, then you need to add a HTML/CSS box and add the following and change the URL of the images and 'alt' tag text:
HTML
<div class="content-wrapper">
<div class="hover-photo">
<img src="back-photo-url-here.jpg" alt="Alt Here" />
<img src="top-photo-url-here.jpg" alt="Alt Here" class="top" />
</div>
</div>
CSS
/**
* Change Photo on Hover
************************************************/
.content-wrapper {text-align: center;}
.hover-photo {
position: relative;
display: inline-block;
z-index: 1;
}
.hover-photo .top {
position: absolute;
top: 0;
left: 0;
z-index: 2;
opacity: 0;
transition: all .4s ease-in-out;
}
.hover-photo:hover .top {opacity: 1;}
/* Change Photo on Hover End */
This site and all of its contents are copyright © 2022 Images in the Backcountry / Mike Matenkosky – All rights reserved.
By using this site you agree to our Privacy Policy.