[CSS] Jak zrobić efekt błysku na obrazku?

Na pewno czasem chciałbyś, aby galeria zdjęć wyglądała szczególnie efektownie i przyciągała uwagę użytkownika strony.
W dzisiejszym artykule zostanie opisany sposób na uzyskanie efektu błysku na zdjęciu za pomocą tylko i wyłącznie CSS. Efekt pojawi się w momencie najazdu kursorem myszki na zdjęcie.

Sekcja 1Struktura kodu HTML

Zaczynamy od kodu HTML, wygląda on następująco:

1
2
3
4

<div class="polaroid">
	<img src="http://farm3.staticflickr.com/2394/2060535614_24d54e30bb.jpg" alt="Obrazek z Flickr"/>
	<div class="shine"></div>
</div>

Kod nie jest przesadnie rozbudowany, ale to dobrze. Utrzymujemy dzięki temu przejrzystość kodu.
Jak pewnie zauważyłeś, w divie o klasie polaroid zawarte są 2 elementy:

• obrazek
• div o klasie shine, który będzie zawierał animację blasku

Jako obrazek wykorzystałem jeden z obrazków z serwisu Flickr na licencji Creative Commons.

Sekcja 2Style CSS

Mając tak przygotowaną strukturę kodu przygotujemy odpowiednie style:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

.polaroid {
	width:  500px;
	height: 314px;
	position: relative;
	border: 5px solid #fff;
	border-bottom: 50px solid #fff;
}
.shine {
	width: 100%; 
	height: 100%;
	background-image: url('blask.png');
	background-position: -500px 0;
	left: 0px;
	top: 0px;
	position: absolute;
	background-repeat: no-repeat;
	-webkit-transition: background-position .5s ease;
	-moz-transition: background-position .5s ease;
	-o-transition: background-position .5s ease;
	transition: background-position .5s ease;
}
.shine:hover { background-position: 500px 0; }

Najpierw definiujemy style dla kontenera obrazka polaroid, a następnie style dla efektu błysku. Jak pewnie zauważyłeś, zostanie wykorzystany atrybut CSS transistion, należy go zdefiniować dla elementu bez żadnej dodatkowej aktywności na nim (czyli tak jak na przykładzie, a nie w hover, focus, itd., itp.). Będzie on płynnie przesuwał przygotowany obrazek blasku od lewej do prawej w czasie 0,5 sekundy. Należy pamiętać, żeby ustawić pozycję końcową dla obrazka (dla danego efektu, w tym przypadku hover).

Sekcja 3Podsumowanie

Jest to prosty przykład na to jak osiągnąć efektowny wygląd swojej galerii zdjęć. Mam nadzieję, że będzie dla Ciebie pożyteczny.

Demo z tego artykułu jest dostępne tutaj: css efekt blasku

źródło