<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.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 ----------> <h1>Every Hover Effects</h1> <h4>A collection of CSS hover effects</h4> <div id="content"> <div class="item e1"> <img src="https://static.pexels.com/photos/2740/nature-animal-fur-dangerous.jpg"> <div class="text1"> <h3>Effect One</h3> <p>A picture description here.</p> </div> </div> <div class="item e2"> <img src="https://static.pexels.com/photos/6550/nature-sky-sunset-man.jpeg"> <div class="text2"> <h3>Effect Two</h3> <p>A picture description here</p> </div> <div class="line top"></div> <div class="line bottom"></div> <div class="line left"></div> <div class="line right"></div> </div> <div class="item e3"> <img src="https://static.pexels.com/photos/57651/pexels-photo-57651.jpeg"> <div class="text3"> <h3>Effect Three</h3> <p>A picture description here</p> </div> </div> <div class="item e4"> <img src="https://static.pexels.com/photos/31030/pexels-photo-31030.jpg"> <div id="e4bk"></div> <div class="text4"> <h3>Effect Four</h3> <div class="line middle"></div> <p>A picture description here</p> </div> </div> <div class="item e5"> <img src="https://static.pexels.com/photos/4827/nature-forest-trees-fog.jpeg"> <div id="e5bk"></div> <div class="text5"> <h3>Effect Five</h3> <p>A picture description here</p> </div> <div class="line inside"></div> </div> <div class="item e6"> <img src="https://static.pexels.com/photos/4037/cold-snow-mountains-nature.jpeg"> <div class="text6"> <h3>Effect Six</h3> <p>A picture description here</p> </div> </div> </div> <h4>Photo from <a href="https://www.pexels.com/"> Pexels</a>.</h4>

body { font-family: 'Lato', sans-serif; } h1 { text-align: center; margin-top: 50px; } h3 { letter-spacing: 1px; line-height: 25px; margin: 0; color: #ffffff; } h4 { text-align: center; font-weight: normal; } p { line-height: 25px; margin: 0; color: #ffffff; } #content { margin-top: 50px; margin-bottom: 30px; width: 100%; overflow:hidden; } .item { width: calc(94%/3); margin: 1%; float: left; overflow: hidden; position: relative; } .item img { max-width: 100%; display: block; transition: all 0.5s ease; } /*effect 1*/ .e1 img { -webkit-filter: grayscale(85%); filter: grayscale(85%); transition: all 0.3s ease; } .text1 { position: absolute; bottom: 5%; left: 20px; color: #ffffff; transition: all 0.5s ease; cursor: pointer; } .text1 p { text-align: left; opacity: 0; } .e1:hover img { -webkit-filter: grayscale(0%); filter: grayscale(0%); } .e1:hover .text1 { position: absolute; bottom: 18%; } .e1:hover p { opacity: 1; } /*effect 2*/ .text2 { text-align: center; position: absolute; width: 100%; top: 42%; cursor: pointer; } .e2 img { transition: all 0.4s ease; } .line{ position:absolute; width: 0px; height: 0px; transition: all 0.5s ease; background: #ffffff; } .top{ top:10%; left:50%; } .bottom{ bottom:10%; left:50%; } .left{ top:50%; left:10%; } .right{ top:50%; right:10%; } .e2:hover img { -webkit-filter: brightness(.6); } .e2:hover .top{ left:10%; width: 80%; height: 1px; } .e2:hover .bottom{ left:10%; width: 80%; height: 1px; } .e2:hover .left{ top:10%; width: 1px; height: 80%; } .e2:hover .right{ top:10%; width: 1px; height: 80%; } /*effect 3*/ .text3 h3 { position: absolute; top: 19%; left:10%; padding:1.5%; border:1px solid #ffffff; cursor: pointer; } .text3 p{ position: absolute; top: 45%; left:10%; opacity:0; transition: all 0.5s ease; cursor: pointer; } .e3:hover p{ position: absolute; top: 37%; left:10%; opacity:1; } .e3:hover img{ -webkit-filter: blur(1px); /* Chrome, Safari, Opera */ filter: blur(1px); transition: all 0.5s ease; } /*effect 4*/ .text4 { text-align: center; position: absolute; width: 100%; top: 37%; opacity:0; transition: all 0.5s ease; cursor: pointer; } .text4 p{ margin-top:20px; } .middle{ position:absolute; top:50%; left:50%; } #e4bk{ position:absolute; top:0%; left:0%; width:100%; height:100%; background:#FF1654; opacity:0; transition: all 0.5s ease; } #e4bk:after{ background-color: #000000; content: ''; display: block; position: absolute; top: 5%; left: 5%; right: 5%; bottom: 5%; opacity:0; transition: all 0.5s ease; } .e4:hover .text4{ opacity:1; } .e4:hover .middle{ position: absolute; top: 50%; left:32%; width:36%; height:1px; } .e4:hover #e4bk{ opacity:0.2; } .e4:hover #e4bk:after{ opacity:1; } /*effect 5*/ .text5 { text-align: center; position: absolute; width: 100%; top: 55%; opacity:0; transition: all 0.5s ease; cursor: pointer; } #e5bk{ position:absolute; top:5%; left:5%; width:90%; height:90%; background:#000000; opacity:0; transition: all 0.5s ease; } .inside{ position:absolute; top:68%; left:50%; } .e5:hover .text5{ opacity:1; position: absolute; top: 42%; } .e5:hover #e5bk{ opacity:0.6; } .e5:hover .line{ position: absolute; top: 68%; left:30%; width:40%; height:1px; } /* effect 6 */ .text6 { text-align: left; position: absolute; width: 90%; bottom:0; padding:5% 0 5% 10%; opacity:0; transition: all 0.5s ease; cursor: pointer; } .e6:hover .text6{ position: absolute; bottom:0; opacity:1; background:rgba(0,0,0,0.6); }