Posted By

marutichintan on 02/05/14


Tagged

image hover effect css3css hovercss


Versions (?)

Who likes this?

1 person have marked this snippet as a favorite

Beppoi


Awesome Image Hower Effect with Caption


 / Published in: CSS
 

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

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

  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. }

Report this snippet  

Comments

RSS Icon Subscribe to comments
Posted By: gorillaagent on February 6, 2014

Looks really good.

Posted By: gorillaagent on February 6, 2014

Looks really good.

You need to login to post a comment.