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 */