Advertisement
afsarwebdev

Hover me 1

Jul 8th, 2018
99
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 0.86 KB | None | 0 0
  1. //HTML
  2. <div class="col-sm-4">
  3. <div class="tc-image-effect-shine">
  4. <img class="img-responsive" src="assets/images/1.png" alt="">
  5. </div>
  6. </div>
  7.  
  8. //CSS
  9. .tc-image-effect-shine {
  10. position: relative;
  11. overflow: hidden;
  12. }
  13. .tc-image-effect-shine:after {
  14. position: absolute;
  15. top: 0;
  16. left: -75%;
  17. z-index: 2;
  18. display: block;
  19. content: '';
  20. width: 50%;
  21. height: 100%;
  22. background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);
  23. background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);
  24. -webkit-transform: skewX(-25deg);
  25. transform: skewX(-25deg);
  26. }
  27. .tc-image-effect-shine:hover:after {
  28. -webkit-animation: shine .9s;
  29. animation: shine .9s;
  30. }
  31. @-webkit-keyframes shine {
  32. 100% {left: 125%;}
  33. }
  34. @keyframes shine {
  35. 100% {left: 125%;}
  36. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement