Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud.
Помощь в установке и настройке CMS Joomla
Помощь в оптимизации и работе CMS Joomla
Помощь с компонентами, модулями и плагинами на Joomla
Пишите в Skype: SWD-RGB или на почту 777@swd-rgb.ru
Подробности на сайте - SWD-RGB.ru
Давайте в этой теме собирём все примеры css эффектов для картинок и изображений. Пожалуйста если пишите код обязательно добавляете свой пример как работает, все возможности у нас на форуме для этого придусмотренны.
Как подключить css файл стилей к шаблону joomla можно почитать по ссылке ниже.
Ну и сразу несколько примеров интересных эффектов, как такое сделать опишу ниже.
/*Стиль picjвсех изображений блока - для картинок*/.picj {height: 188px;width: 188px;
overflow: hidden; /*Скрывает все, что не влазит в блок*/margin: 9px;border: 10px solid #fff; /*Для всех браузеров*/border: 10px solid #eee\9; /*Для IE6, IE7, IE8*/-webkit-box-shadow: 2px 3px 10px #6E6E6E;box-shadow: 2px 3px 10px #6E6E6E;float: left;}.picj:hover { cursor: pointer;}
/*размеры всех картинок по усолчанию*/.picj img {width: 220px;height: 188px;}
/*Увеличение*/.grow img {height: 188px;width: 188px;-webkit-transition: all 1s ease;-moz-transition: all 1s ease;-o-transition: all 1s ease;-ms-transition: all 1s ease;transition: all 1s ease;}.grow img:hover {width: 300px;height: 300px;margin-left: -50px;margin-top: -50px;}
/*Уменьшение*/.shrink img {height: 200px;width: 200px;-webkit-transition: all 1s ease;-moz-transition: all 1s ease;-o-transition: all 1s ease;-ms-transition: all 1s ease;transition: all 1s ease;}.shrink img:hover {width: 300px;height: 300px;}
/*Сдвиг влево*/.sidepan img {width: 250px;height: 200px;margin-left: 0px;-webkit-transition: all 1s ease;-moz-transition: all 1s ease;-o-transition: all 1s ease;-ms-transition: all 1s ease;transition: all 1s ease;}.sidepan img:hover {margin-left: -50px;}
/*небольшой наклон картинки*/.tilt {-webkit-transition: all 0.5s ease;-moz-transition: all 0.5s ease;-o-transition: all 0.5s ease;-ms-transition: all 0.5s ease;transition: all 0.5s ease;}.tilt:hover {-webkit-transform: rotate(-10deg);-moz-transform: rotate(-10deg);-o-transform: rotate(-10deg);-ms-transform: rotate(-10deg);transform: rotate(-10deg);}
/*Бордер с кругом*/.morph {-webkit-transition: all 0.5s ease;-moz-transition: all 0.5s ease;-o-transition: all 0.5s ease;-ms-transition: all 0.5s ease;transition: all 0.5s ease;}.morph:hover {border: 10px solid #333;border-radius: 50%;-webkit-transform: rotate(360deg);-moz-transform: rotate(360deg);-o-transform: rotate(360deg);-ms-transform: rotate(360deg);transform: rotate(360deg);}
/*Нечеткая картинка*/.blur img {-webkit-transition: all 1s ease;-moz-transition: all 1s ease;-o-transition: all 1s ease;-ms-transition: all 1s ease;transition: all 1s ease;}.blur img:hover {-webkit-filter: blur(2px);}
/*ЧЕРНО-БЕЛОЕ*/.bw {-webkit-transition: all 1s ease;-moz-transition: all 1s ease;-o-transition: all 1s ease;-ms-transition: all 1s ease;transition: all 1s ease;}.bw:hover {-webkit-filter: grayscale(100%);}
/*ЯРКОСТЬ*/.brighten img {-webkit-filter: brightness(100%);-webkit-transition: all 1s ease;-moz-transition: all 1s ease;-o-transition: all 1s ease;-ms-transition: all 1s ease;transition: all 1s ease;}.brighten img:hover {-webkit-filter: brightness(60%);}
/*Сепия*/.sepia img {-webkit-transition: all 1s ease;-moz-transition: all 1s ease;-o-transition: all 1s ease;-ms-transition: all 1s ease;transition: all 1s ease;}.sepia img:hover {-webkit-filter: sepia(100%);}
/*КОНТРАСТ*/.contrast img {-webkit-transition: all 1s ease;-moz-transition: all 1s ease;-o-transition: all 1s ease;-ms-transition: all 1s ease;transition: all 1s ease;}.contrast img:hover {-webkit-filter: contrast(185%);}
/*Инверсия*/.invert img {-webkit-transition: all 1s ease;-moz-transition: all 1s ease;-o-transition: all 1s ease;-ms-transition: all 1s ease;transition: all 1s ease;}.invert img:hover {-webkit-filter: invert(100%); }
/*СРАЗУ МНОГО Эффектов*/.opacity img {-webkit-transition: all 1s ease;-moz-transition: all 1s ease;-o-transition: all 1s ease;-ms-transition: all 1s ease;transition: all 1s ease;}.opacity img:hover {-webkit-transform: rotate(-10deg);-moz-transform: rotate(-10deg);-o-transform: rotate(-10deg);-ms-transform: rotate(-10deg);transform: rotate(-10deg);width: 300px;height: 300px;margin-left: -60px;margin-top: -10px}
Вот ещё интересные эффекты когда изображение переворачивается а за ним текст
Используем HTML5 элемент figure вместе с figcaption и в итоге получаем такой прикольный эффект
Это вставляем в CSS:
А это вставляем HTML туда где будет отображаться картинка
Посмотреть как сделать можете по ссылке на сайте, там ещё 2 интересных эффекта
