<div class = "container">
	<div class = "row text-center">
		<h1>Image Hover Effect</h1>
	</div>
	
	<h2>CSS3 Filter Effect</h2>
	<div class = "row">
	<a href = "#" class = "column col-xs-6" id = "sepia"><img src = "https://mir-s3-cdn-cf.behance.net/project_modules/max_1200/041ba526957515.56361c211db4e.png"><p>Sepia</p></a>
	<a href = "#" class = "column col-xs-6" id = "grayscale"><img src = "https://mir-s3-cdn-cf.behance.net/project_modules/max_1200/ff8a2426957515.56361c212331c.png"><p>Grayscale</p></a>	
</div>
	
	<h2>CSS3 Transform Effect</h2>
	<div class = "row">
	<a href = "#" class = "column col-xs-6" id = "zoomIn"><figure><img src = "https://upload.wikimedia.org/wikipedia/commons/1/19/Thunderstorm_in_sydney_2000x1500.png"></figure><p>Zoom In</p></a>
	<a href = "#" class = "column col-xs-6" id = "zoomOut"><figure><img src = "https://upload.wikimedia.org/wikipedia/commons/3/3c/GoldenMedows.jpg"></figure><p>Zoom Out</p></a>	
</div>
	
	<h2>3D Hover Effect</h2>
	<div class = "row">
		<div class = "tdimension">
			<a href = "#">
			</a>
	</div>
	</div>
	
	<h2>Hover Effect With Caption</h2>
	<div class = "row">
			<a href = "#" class = "column col-xs-6" id = "caption"><span class = "text"><h1>Thunder</h1></span><img src = "https://upload.wikimedia.org/wikipedia/commons/1/19/Thunderstorm_in_sydney_2000x1500.png"></a>
			<div class = "frame col-xs-6">
			<img src = "https://pbs.twimg.com/profile_images/378800000601617732/9e87878ffdd67333ac8b81f9da22696a_400x400.jpeg">
			<div class = "details">
				<h1>Lorem</h1>
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam lorem nunc, sollicitudin a nisi sodales, imperdiet dignissim enim. Nam sapien quam</p>
			</div>
			
		</div>
		
</div>	
	
	<div class="footer">
	<p>Image Source: 
			<a href="http://www.junedigann.com">June Digann</a>
			<a href="https://commons.wikimedia.org/wiki/Main_Page">Wikiemedia</a>
	</p>
	</div>
		
</div>

body {
	background: #ECECEC;
}

.footer {
	width: 50%;
	margin-left: 25%;
	text-align: center;
	font-family: 'Julius Sans One', sans-serif;
	margin-top: 24px;
}

.container {
	max-width: 720px;
	margin: 24px auto 48px auto;
}

h1 {
	font-family: 'Montserrat', sans-serif;
	text-transform: uppercase;
}

h2 {
	font-family: 'Julius Sans One', sans-serif;
	font-size: 2.5rem;
}

.row {
	margin-top: 12px;
}

.column {
	display: inline-block;
	text-align: center;
}

figure {
	overflow: hidden;
}

a p {
	color: black;
	margin-top: 8px;
	font-family: 'Open Sans', sans-serif;
}

a:hover {
	text-decoration: none;
}

.column img {
	display: block;
	width: 100%;
	height: 300px;
}

/* CSS Image Hover. Created refering to Naoya's Pen: https://codepen.io/nxworld/pen/ZYNOBZ */
/*Sepia*/
.column#sepia img {
	-webkit-filter: sepia(100%);
	filter: sepia(100%);
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}
.column#sepia:hover img {
	-webkit-filter: sepia(0);
	filter: sepia(0);
}

/*GrayScale*/
.column#grayscale img {
	-webkit-filter: grayscale(100%);
	filter: grayscale(100%);
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}
.column#grayscale:hover img {
	-webkit-filter: grayscale(0);
	filter: grayscale(0);
}

/*Zoom In*/
.column#zoomIn img {
	-webkit-transform: scale(1);
	transform: scale(1);
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}
.column#zoomIn:hover img {
	-webkit-transform: scale(1.3);
	transform: scale(1.3);
}

/*Zoom Out*/
.column#zoomOut img {
	-webkit-transform: scale(1.5);
	transform: scale(1.5);
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}
.column#zoomOut:hover img {
	-webkit-transform: scale(1);
	transform: scale(1);
}

/* 3D Transform. Craeted refering to Dudley Storey's Pen: https://codepen.io/dudleystorey/pen/KFLJp */
.tdimension {
	width: 300px;
	height: 300px;
	margin: 20px auto 40px auto;
	perspective: 1000px;
}
.tdimension a {
	display: block;
	width: 100%;
	height: 100%;
	background: url("https://mir-s3-cdn-cf.behance.net/project_modules/disp/e8346826957515.56361c2106f3f.png");
	background-size: cover;
	transform-style: preserve-3d;
	transform: rotateX(70deg);
	transition: all 0.8s;	
}
.tdimension:hover a {
	transform: rotateX(20deg); 	
}	
.tdimension a:after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 40px;
    background: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.1));    
   	transform: rotateX(90deg);
    transform-origin: bottom;
}

/*With Simple Caption*/
.column#caption {
	position: relative;
}
.column#caption .text {
		position: absolute;		
    top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		z-index: 10;
    opacity: 0;
    transition: all 0.8s ease;			
}
.column#caption .text h1 {		
		margin: 0;		
		color: white;
}
.column#caption:hover .text {
	opacity: 1;
	
}
.column#caption:hover img {
	-webkit-filter: sepia(90%);
}

/* Craeted refering to LittleSnippets.net Pen: https://codepen.io/littlesnippets/pen/adLELd */
.frame {
	text-align: center;	
	position: relative;
	cursor: pointer;	
	perspective: 500px; 
}
.frame img {
	width: 300px;
	height: 300px;
}
.frame .details {
	width: 70%;
	height: 80%;	
	padding: 5% 8%;
	position: absolute;
	content: "";
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%) rotateY(90deg);
	transform-origin: 50%;
	background: rgba(255,255,255,0.9);	
	opacity: 0;
	transition: all 0.4s ease-in;
	
}
.frame:hover .details {
	transform: translate(-50%, -50%) rotateY(0deg);
	opacity: 1;
}

/* Image Credit: 
- http://www.junedigann.com/ 
- https://commons.wikimedia.org/wiki/Main_Page
*/