<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <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>

body { background: #ECECEC; } .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; }