Tutes Club

Light flick effect on image hover – CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
.collection-grid-item__link:before{
    -ms-transition:all 0.5s ease-in-out;
    -webkit-transition:all 0.5s ease-in-out;
    transition:all 0.5s ease-in-out;
    content:"";
    position:absolute;
    top:-110%;
    left:-210%;
    width:200%;
    height:200%;
    opacity:0;
    filter:alpha(opacity=0);
    -webkit-transform:rotate(30deg);
    -ms-transform:rotate(30deg);
    -moz-transform:rotate(30deg);
    -o-transform:rotate(30deg);
    transform: rotate(44deg);
    background:rgba(255,255,255,0.1);
    background:linear-gradient(to right, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.1) 77%, rgba(255,255,255,0.5) 92%, rgba(255,255,255,0) 100%);
}

Posted

in

by

Harshvardhan Malpani

Tags:

, , ,

Comments

Leave a Reply

Your email address will not be published. Required fields are marked *