<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 ----------> <div class="container"> <div class="main"> <div class="box"> <img src="http://wallpaperlatest.com/wp-content/uploads/supranatural-3d-wallpaper-11.jpg" /> <div class="overlay"> </div> <a class="more" href="#name">Read more </a> </div> <div class="box"> <img src="http://wallpaperlatest.com/wp-content/uploads/creative-3d-wallpaper-14.jpg" /> <div class="overlay"> </div> <a href="#">Read more </a> </div> <div class="box"> <img src="http://wallpaperlatest.com/wp-content/uploads/best-3d-wallpaper-10.jpg" /> <div class="overlay"> </div> <a href="#">Read more </a> </div> <div class="box"> <img src="http://wallpaperlatest.com/wp-content/uploads/Beautiful-3d-wallpaper-background-9.jpg" /> <div class="overlay"> </div> <a href="#">Read more </a> </div> <div class="box"> <img src="http://wallpaperlatest.com/wp-content/uploads/animal-3d-wallpaper-1.jpg" /> <div class="overlay"> </div> <a href="#">Read more </a> </div> <div class="box"> <img src="http://wallpaperlatest.com/wp-content/uploads/nike-wallpaper-2.jpg" /> <div class="overlay"> </div> <a href="#">Read more </a> </div> <div class="box"> <img src="http://wallpaperlatest.com/wp-content/uploads/2560x1440-3d-inspiration-wallpaper-8.jpg" /> <div class="overlay"> </div> <a href="#">Read more </a> </div> <div class="box"> <img src="hhttp://wallpaperlatest.com/wp-content/uploads/nike-wallpaper-3.jpg" /> <div class="overlay"> </div> <a href="#">Read more </a> </div> <div class="box"> <img src="http://wallpaperlatest.com/wp-content/uploads/nike-wallpaper-4.jpg" /> <div class="overlay"> </div> <a href="#">Read more </a> </div> <div class="box"> <img src="http://wallpaperlatest.com/wp-content/uploads/desktop-wallpapers-download-1.jpg" /> <div class="overlay"> </div> <a href="#">Read more </a> </div> <div class="box"> <img src="http://wallpaperlatest.com/wp-content/uploads/desktop-background-wallpaper-download-2.jpg" /> <div class="overlay"> </div> <a href="#">Read more </a> </div> <div class="box"> <img src="http://wallpaperlatest.com/wp-content/uploads/desktop-wallpaper-1920x1080-3.jpg" /> <div class="overlay"> </div> <a href="#">Read more </a> </div> <div class="box"> <img src="http://wallpaperlatest.com/wp-content/uploads/desktop-wallpaper-1920x1080-4.jpg" /> <div class="overlay"> </div> <a href="#">Read more </a> </div> <div class="box"> <img src="http://wallpaperlatest.com/wp-content/uploads/3d-live-wallpaper-free-download-1.jpg" /> <div class="overlay"> </div> <a href="#">Read more </a> </div> </div> </div>

.box{width:280px; height:230px; border:2px solid #000; border-radius:2px; float:left; margin:20px 30px; } .box img{width:300px; height:250px;} .box .overlay{width:300px; height:250px; background:#fff; margin:-250px 0px 0px 0px; opacity:0.5; } .box a{padding:5px 7px; border:1px solid #000; text-decoration:none; font-family:sans-serif; font-size:14px; margin:-140px 0px 0px 15px; display:inline-block; opacity:0; transition:all 0.5s ease-in-out; cursor: pointer;/* z-index: 10000; */position: absolute;} .box .overlay:hover{opacity:0.1; transition:all 0.5s ease-in-out; width:300px; margin-left:50px; float:right; } .box:hover{box-shadow:0px 0px 10px #6A6A6A; border:1px solid #00DFDF;transition:all 0.5s ease-in-out;} .box:hover a{opacity:1; background:#FFFFFF; color:#000000; margin:-40px 0px 0px 15px; border-radius:1px; } .box a:hover{border:1px solid #00DFDF;transition:all 0.5s ease-in-out; }