Css ile resim yansıma efekti ( Hover )
8 Temmuz 2023 / 10:09
Burak
Merhabalar,
Aşağıdaki css ile resim üzerine getirince resim üzerinde güneş yansıması gibi efek geçiyor shine efect diye geçiyor
Css kod
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 |
/*RESİM YANSIMA EFEKTİ*/ figure { width: auto; height: auto; margin: 0; padding: 0; background: #fff; overflow: hidden; } .shine figure { position: relative; } .shine figure::before { 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); } .shine figure:hover::before { -webkit-animation: shine .75s; animation: shine .75s; } @-webkit-keyframes shine { 100% { left: 125%; } } @keyframes shine { 100% { left: 125%; } } /*RESİM YANSIMA EFEKTİ*/ |
Resim tarafında kullanımı aşağıdaki gibidir
|
1 2 3 |
<div class="shine"> <figure><img src="https://picsum.photos/300/200?image=244" /></figure> </div> |
Bu Yazılarıda Okuyabilirsiniz...
Bir cevap yazın