Эффект прозрачности для изображений

Эффект прозрачности для изображений
Дата: 13 Декабря 2013, в 15:13
Рубрика: Вебмастерская
Просмотры: 1222

Еще один приятный визуальный эффект, который очень популярен - плавное проявление и затухание прозрачности элементов при наведении на них курсора мыши.

Следующий код устанавливает непрозрачность 100% при наведении курсора мыши, и 60% - при потере фокуса.

Эффект прозрачности с помощью jQuery

Создадим файл с расширением .js и впишем в него следующий код. Так же не забываем подключить этот файл к странице.

/* Эффект прозрачности для изображений на jQuery */

$(document).ready(function() {
	$("#banners img").fadeTo("slow", 0.6);	// Устанавливаем непрозрачность миниатюр до 60% при загрузке страницы.
	$("#banners img").hover(function() {
		$(this).fadeTo("slow", 1.0);	// При наведении курсора, непрозрачность становится 100%.
	}, function() {
		$(this).fadeTo("slow", 0.6);	// При потере фокуса непрозрачность опять становится 60%.
	});
});

Эффект прозрачности с помощью CSS

Откроем наш файл стилей .css или создадим отдельный и впишем этот код стилей.

/* Эффект прозрачности для изображений на CSS */

#banners img {
	opacity:0.6;
	-moz-opacity:0.6;
	filter:alpha(opacity=60);
}
#banners:hover img {
	opacity:1.0;
	-moz-opacity:1.0;
	filter:alpha(opacity=100);
}

И все картинки, которые хотим сделать с эффектом прозрачности заключаем в тег div с id или class который прописан в скрипте или стилях:

<div id="banners">Желаемая картинка</div>