Advanced Search

Awesome Image Hower Effect with Caption

/ Published in: CSS
Save to your folder(s)
This Effect is Mostly Created with Combination of Javascript and Css
By the Below CSS Code Create Same Effect without javascript

For Live Demo visit http://extremecss.blogspot.in/2014/01/awesome-image-hover-effect-using-pure.html

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. #mainwrapper {  
  2.   font: 10pt normal Arial, sans-serif;  
  3.   height: auto;  
  4.   margin: 80px auto 0 auto;
  5.   text-align: center;  
  6.   width: 660px;  
  7. }  
  8.  
  9. #mainwrapper .box {
  10.     border: 5px solid #fff;
  11.     cursor: pointer;
  12.     height: 172px;
  13.     float: left;
  14.     margin-bottom: 20px;
  15.     position: relative;
  16.     overflow: hidden;
  17.     width: 300px;
  18.     -webkit-box-shadow: 1px 1px 1px 1px #ccc;
  19.     -moz-box-shadow: 1px 1px 1px 1px #ccc;
  20.     box-shadow: 1px 1px 1px 1px #ccc;
  21. }
  22.  
  23. #mainwrapper .box img {
  24.     position: absolute;
  25.     left: 0;
  26.     -webkit-transition: all 300ms ease-out;
  27.     -moz-transition: all 300ms ease-out;
  28.     -o-transition: all 300ms ease-out;
  29.     -ms-transition: all 300ms ease-out;
  30.     transition: all 300ms ease-out;
  31. 	width: auto;
  32. 	height: 100%;
  33. }
  34.  
  35.  
  36. #mainwrapper .box .caption {
  37.     background-color: rgba(0,0,0,0.8);
  38.     position: absolute;
  39.     color: #fff;
  40.     z-index: 100;
  41.     -webkit-transition: all 300ms ease-out;
  42.     -moz-transition: all 300ms ease-out;
  43.     -o-transition: all 300ms ease-out;
  44.     -ms-transition: all 300ms ease-out;
  45.     transition: all 300ms ease-out;
  46.     left: 0;
  47. }
  48. #mainwrapper .box .fade-caption, #mainwrapper .box .scale-caption {
  49.     opacity: 0;
  50.     width: 280px;
  51.     height: 152px;
  52.     text-align: left;
  53.     padding: 15px;
  54. }
  55.  
  56. #mainwrapper .box:hover .fade-caption {  
  57.     opacity: 1;  
  58. }

URL: http://extremecss.blogspot.in/2014/01/awesome-image-hover-effect-using-pure.html

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.