Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- //HTML
- <div class="col-sm-4">
- <div class="tc-image-effect-shine">
- <img class="img-responsive" src="assets/images/1.png" alt="">
- </div>
- </div>
- //CSS
- .tc-image-effect-shine {
- position: relative;
- overflow: hidden;
- }
- .tc-image-effect-shine:after {
- position: absolute;
- top: 0;
- left: -75%;
- z-index: 2;
- display: block;
- content: '';
- width: 50%;
- height: 100%;
- background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);
- background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);
- -webkit-transform: skewX(-25deg);
- transform: skewX(-25deg);
- }
- .tc-image-effect-shine:hover:after {
- -webkit-animation: shine .9s;
- animation: shine .9s;
- }
- @-webkit-keyframes shine {
- 100% {left: 125%;}
- }
- @keyframes shine {
- 100% {left: 125%;}
- }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement