Display Text on Photo When Hovered - Prints for Sale

Display Text on Photo When Hovered

If you want to show some text when you hover a single photo, you can use this. Just add a HTML/CSS box to your page and add the following code. You'll have to edit the URL, image etc.

HTML


<ul class="photo-wrap">	
	<li>
		<div class="photo-image">
			<a href="Your-Link-URL-Here">
				<img src="Your-Picture-Here" alt="Text Here" width="" height="" />
			</a>
		</div>
		<h2 class="photo-title">
			<a href="Your-URL-Here">Here is Some Text on Hover</a>
		</h2>
	</li>
</ul>

CSS


.photo-wrap {
	list-style: none;
	text-align: center;
	}
	
.photo-wrap li {
	display: inline-block;
	margin: 12px;
	position: relative;
	vertical-align: top;
	}
	
.photo-wrap li .photo-image a img {
	height: auto;
	max-width: 100%;
	}
	
.photo-wrap .photo-title {
	background: rgba( 0, 0, 0, .8 );
	font: normal 18px/27px Arial, Heletica, sans-serif;
	clear: none;
	float: none;				
	margin: 0;
	padding: 10px 18px;
	position: absolute;
		right: 0;
		left: 0;
		bottom: 20px;
	text-align: center;
	width: auto;
	opacity: 0;
	z-index: 1;
	}
	
.photo-wrap li:hover .photo-title {
	opacity: 1;
	}		

ActionActionAltAdjustAlertAlert2AngleBracketDownAngleBracketLeftAngleBracketLeftSlimAngleBracketRightAngleBracketRightSlimAngleBracketUpic AspectRectable 18dpic AspectSquare 18dpBrowserCalendarCameraPhotoCameraPhoto2CameraVideo2CartCart2CartAddCartAdd2CheckmarkCommentComment2CreditCardCropDesktopDownloadDownload2EditEdit2EmailEmail2FlagFlag2FolderFolder2FolderOpenFullScreenGalleryGallery2GearHeartHeartOutlinedHelpHelpEncircledHideHistoryHistory2HomeHome2ImageImage2InfoInfoEncircledInfoEncircled2LaptopLayoutLinkLockLock2MenuMenu2MinusMinusSlimMobileMoreHorizMoreVertPagePage2PausePlayPlusPlusSlimPrinterSearchSearch2ShareSizesStarStarOutlinedSyncTabletTagTrashTrash2UploadUpload2UserUsersVideoCameraViewWarningWrenchXCrossActionActionAltAddAdjustAlertAlert2AmazonAndroidAppleArrowBackArrowNextBrowserCameraPhotoCameraPhoto2CartCart2CartAddCheckCloseCommentComment2CropCursorMoveDesktopDownloadDropboxFacebookFlickrFolderFolder2FullScreenSlimGalleryGallery2GoogleDriveGooglePhotosHelpEncircledHelpEncircled2HistoryHistory2HomeHome2InfoEncircledInfoEncircled2LaptopLayoutLightroomLinkLockLock2MenuMobileMoreHorizMoreVertNavigateBackNavigateNextPaintPausePeoplePeople2PersonPerson2PhoneSavePlayPrinterRemoveSearchSettingsSettings2ShareSharePrivateSizesSmugMugStarStar2TabletTrashTrash2TwitterUploadUpload2Wrench Page 1Page 1 CopyCombined ShapeCombined ShapeCombined ShapeCombined ShapetemplatestemplatesEZprints-98404-landscapeEZprints-98404-portraittemplatestemplatesEZprints-98406-landscapeEZprints-98406-portraitEZprints-98407-landscapeEZprints-98407-portraittemplatestemplatestemplatestemplatesEZprints-98416-landscapeEZprints-98416-portraitEZprints-98417-landscapeEZprints-98417-portraitEZprints-98418-landscapeEZprints-98418-portraitEZprints-98419-landscapeEZprints-98419-portraitshared-style-defs
Powered by SmugMug Log In