Скачать для фотошопа и для создания сайта Среда, 24.07.2024, 06:20
Приветствую Вас Гость | RSS
Меню сайта

Категории раздела
Шаблоны для Ucoz
Шапки для Ucoz
Скрипты для Ucoz
Иконки для Ucoz
Кнопки для Ucoz
Уроки для Ucoz
Статьи для Ucoz
Прочее для Ucoz

Популярное

Мини-чат

Наш опрос
Оцените мой сайт
1. Отлично
2. Хорошо
3. Неплохо
4. Плохо
5. Ужасно
Всего ответов: 7

Статистика

Онлайн всего: 1
Гостей: 1
Пользователей: 0


8 классных эффектов при наведении на CSS
После регистрации у вас появиться еще одна ссылка для бесплатного скачивания и пропадет рекламма!
23.12.2023, 16:08
8 классных эффектов при наведении на CSS




Классно выполненные эффекты, которые производятся с помощью изображение при наведении курсора на них, где с помощью HTML и CSS идет вся анимация. По сути здесь идет 8 оригинальных эффектов, но у каждого трюка есть добавление, которое заключается в аналогичном трюке с картинкой, разве разворот или появление немного изменено. Где только вам остается выбрать нужный эффект, где у всех закреплена кнопка для открытия или перехода на основной материал.

Если рассматривать их под галерею или новостной блок, то вероятно под это вправление они были выстроенные, также нужно заметить, что в прикрепленном media, где поставлена под мобильные аппараты. Где по умолчанию наблюдаем вид материала в колонку, где идет сразу 3 корпуса, но при сжатии монитора они отлично выстраиваются под мобильные аппараты или небольшие экраны.

Но здесь при выборе нужно самостоятельно ставить на свою площадку, где самостоятельно можно, как 3 корпуса поставить, так 1 широкий, все безусловно зависит от самого сайта и нужно учитывать тематическое направление, хотя созданный дизайн на светлом и на темном виде отлично смотрится.

Если смотреть как пример, то это один эффект из многих.



Установка:

HTML

Код

<!-- размеры -->
  <div class="kasduped">
  <div class="msanug-lopcag">
  <div class="asybaledsam">
   
  <!-- Эффекты -->
  <h2><span>Эффекты 1</span></h2>
  <ul>
  <li>
  <div class="krasivaya-animatsiya-1 aneasaku-1">
  <div class="akasenag-korobka">
  <img src="http://zornet.ru/ABVUN/Aba/detunis/supasnab/dsamipredsa.jpg" alt="картинка-1">
  </div>
  <div class="bekepo-ubavan">
  <h3>Название</h3>
  <p>WordPress, обеспечивающий более 35% всех веб-сайтов в Интернете, несомненно, является идеальным выбором для системы.</p>
  <a href="#" class="btn">смотреть далее</a>
  </div>
  </div>
  </li>
  <li>
  <div class="krasivaya-animatsiya-1 aneasaku-2">
  <div class="akasenag-korobka">
  <img src="http://zornet.ru/ABVUN/Aba/detunis/supasnab/dsamipredsa.jpg" alt="картинка-2">
  </div>
  <div class="bekepo-ubavan">
  <h3>Название</h3>
  <p>Однако успех вашего сайта зависит от выбранного вами хостинг-провайдера. Хостинг делает ваш сайт доступным для интернет.</p>
  <a href="#" class="btn">смотреть далее</a>
  </div>
  </div>
  </li>
  <li>
  <div class="krasivaya-animatsiya-1 aneasaku-3">
  <div class="akasenag-korobka">
  <img src="http://zornet.ru/ABVUN/Aba/detunis/supasnab/dsamipredsa.jpg" alt="картинка-3">
  </div>
  <div class="bekepo-ubavan">
  <h3>Название</h3>
  <p>Но с таким количеством доступных вариантов, как выбрать «правильного» хостинг-провайдера?</p>
  <a href="#" class="btn">смотреть далее</a>
  </div>
  </div>
  </li>
  </ul>
  <!-- aneasaku-1 End -->
   
  <!-- aneasaku-2 -->
  <h2><span>Effects 2</span></h2>
  <ul>
  <li>
  <div class="krasivaya-animatsiya-2 aneasaku-1">
  <div class="akasenag-korobka">
  <img src="http://zornet.ru/ABVUN/Aba/detunis/supasnab/dsamipredsa.jpg" alt="картинка-1">
  </div>
  <div class="bekepo-ubavan">
  <h3>Название</h3>
  <p>Выбор хостинга во многом зависит от ваших уникальных потребностей. Тем не менее, наиболее важными факторами, которые следует.</p>
  <a href="#" class="btn">смотреть далееe</a>
  </div>
  </div>
  </li>
  <li>
  <div class="krasivaya-animatsiya-2 aneasaku-2">
  <div class="akasenag-korobka">
  <img src="http://zornet.ru/ABVUN/Aba/detunis/supasnab/dsamipredsa.jpg" alt="картинка-2">
  </div>
  <div class="bekepo-ubavan">
  <h3>Название</h3>
  <p>2004 году SiteGround доверяют владельцам 2 000 000 доменов. Это также один из четырех хостинговых сервисов.</p>
  <a href="#" class="btn">смотреть далее</a>
  </div>
  </div>
  </li>
  <li>
  <div class="krasivaya-animatsiya-2 aneasaku-3">
  <div class="akasenag-korobka">
  <img src="http://zornet.ru/ABVUN/Aba/detunis/supasnab/img-1.jpg" alt="картинка-3">
  </div>
  <div class="bekepo-ubavan">
  <h3>Название</h3>
  <p>рекомендованных сообществом Wordress.org за высочайшую производительность и расширенные протоколы безопасности.</p>
  <a href="#" class="btn">смотреть далее</a>
  </div>
  </div>
  </li>
  </ul>
  <!-- aneasaku-2 End -->
   
  <!-- aneasaku-3 -->
  <h2><span>Effects 3</span></h2>
  <ul>
  <li>
  <div class="krasivaya-animatsiya-3 aneasaku-1">
  <div class="akasenag-korobka">
  <img src="http://zornet.ru/ABVUN/Aba/detunis/supasnab/dsamipredsa.jpg" alt="картинка-1">
  </div>
  <div class="bekepo-ubavan">
  <h3>Название</h3>
  <p>Они также предлагают фантастическое обслуживание клиентов, которые легко доступны, чтобы помочь пользователям на каждом.</p>
  <a href="#" class="btn">смотреть далее</a>
  </div>
  </div>
  </li>
  <li>
  <div class="krasivaya-animatsiya-3 aneasaku-2">
  <div class="akasenag-korobka">
  <img src="http://zornet.ru/ABVUN/Aba/detunis/supasnab/dsamipredsa.jpg" alt="картинка-2">
  </div>
  <div class="bekepo-ubavan">
  <h3>Название</h3>
  <p>Работая с 2004 года, SiteGround сегодня доверяют владельцам 2 000 000 доменов. Это также один из четырех.</p>
  <a href="#" class="btn">смотреть далее</a>
  </div>
  </div>
  </li>
  <li>
  <div class="krasivaya-animatsiya-3 aneasaku-3">
  <div class="akasenag-korobka">
  <img src="http://zornet.ru/ABVUN/Aba/detunis/supasnab/dsamipredsa.jpg" alt="картинка-3">
  </div>
  <div class="bekepo-ubavan">
  <h3>Название</h3>
  <p>Они также предлагают фантастическое обслуживание клиентов, которые легко доступны, чтобы помочь пользователям на каждом этапе установки.</p>
  <a href="#" class="btn">смотреть далее</a>
  </div>
  </div>
  </li>
  </ul>
  <!-- aneasaku-3 End -->
   
  <!-- aneasaku-4 -->
  <h2><span>Effects 4</span></h2>
  <ul>
  <li>
  <div class="krasivaya-animatsiya-4 aneasaku-1">
  <div class="akasenag-korobka">
  <img src="http://zornet.ru/ABVUN/Aba/detunis/supasnab/dsamipredsa.jpg" alt="картинка-1">
  </div>
  <div class="bekepo-ubavan">
  <h3>Название</h3>
  <p>Bluehost является признанным именем в индустрии хостинга за предоставление исключительных услуг с 2005 года.</p>
  <a href="#" class="btn">смотреть далее</a>
  </div>
  </div>
  </li>
  <li>
  <div class="krasivaya-animatsiya-4 aneasaku-2">
  <div class="akasenag-korobka">
  <img src="http://zornet.ru/ABVUN/Aba/detunis/supasnab/dsamipredsa.jpg" alt="картинка-2">
  </div>
  <div class="bekepo-ubavan">
  <h3>Название</h3>
  <p>В отличие от других хостинг-сервисов, Bluehost имеет серверы в своих собственных центрах обработки данных.</p>
  <a href="#" class="btn">смотреть далее</a>
  </div>
  </div>
  </li>
  <li>
  <div class="krasivaya-animatsiya-4 aneasaku-3">
  <div class="akasenag-korobka">
  <img src="http://zornet.ru/ABVUN/Aba/detunis/supasnab/dsamipredsa.jpg" alt="картинка-3">
  </div>
  <div class="bekepo-ubavan">
  <h3>Название</h3>
  <p>Другие ключевые функции включают бесплатную регистрацию домена, SSL-сертификаты и автоматическую установку.</p>
  <a href="#" class="btn">смотреть далее</a>
  </div>
  </div>
  </li>
  </ul>
  <!-- aneasaku-4 End -->
   
  <!-- aneasaku-5 -->
  <h2><span>Effects 5</span></h2>
  <ul>
  <li>
  <div class="krasivaya-animatsiya-5 aneasaku-1">
  <div class="akasenag-korobka">
  <img src="http://zornet.ru/ABVUN/Aba/detunis/supasnab/img-1.jpg" alt="картинка-1">
  </div>
  <div class="bekepo-ubavan">
  <h3>Название</h3>
  <p>Удостоенный наград веб-хостинг, HostGator является одним из немногих провайдеров, предлагающих.</p>
  <a href="#" class="btn">смотреть далее</a>
  </div>
  </div>
  </li>
  <li>
  <div class="krasivaya-animatsiya-5 aneasaku-2">
  <div class="akasenag-korobka">
  <img src="http://zornet.ru/ABVUN/Aba/detunis/supasnab/img-1.jpg" alt="картинка-2">
  </div>
  <div class="bekepo-ubavan">
  <h3>Название</h3>
  <p>гарантированное время безотказной работы 99,99% благодаря облачным протоколам..</p>
  <a href="#" class="btn">смотреть далее</a>
  </div>
  </div>
  </li>
  <li>
  <div class="krasivaya-animatsiya-5 aneasaku-3">
  <div class="akasenag-korobka">
  <img src="http://zornet.ru/ABVUN/Aba/detunis/supasnab/img-1.jpg" alt="картинка-3">
  </div>
  <div class="bekepo-ubavan">
  <h3>Название</h3>
  <p>Регистрация и установка HostGator также проста и обычно занимает несколько минут для установки.</p>
  <a href="#" class="btn">смотреть далее</a>
  </div>
  </div>
  </li>
  </ul>
  <!-- aneasaku-5 End -->
   
  <!-- aneasaku-6 -->
  <h2><span>Effects 6</span></h2>
  <ul>
  <li>
  <div class="krasivaya-animatsiya-6 aneasaku-1">
  <div class="akasenag-korobka">
  <img src="http://zornet.ru/ABVUN/Aba/detunis/supasnab/img-1.jpg" alt="картинка-1">
  </div>
  <div class="bekepo-ubavan">
  <h3>Название</h3>
  <p>Это также идет с удобством предложения пакетов, чтобы приспособить пользователей всех уровней.</p>
  <a href="#" class="btn">смотреть далее</a>
  </div>
  </div>
  </li>
  <li>
  <div class="krasivaya-animatsiya-6 aneasaku-2">
  <div class="akasenag-korobka">
  <img src="http://zornet.ru/ABVUN/Aba/detunis/supasnab/img-1.jpg" alt="картинка-2">
  </div>
  <div class="bekepo-ubavan">
  <h3>Название</h3>
  <p>Другие важные функции включают бесплатную миграцию, современные системы безопасности, чистую панель управления и масштабируемые ресурсы.</p>
  <a href="#" class="btn">смотреть далее</a>
  </div>
  </div>
  </li>
  <li>
  <div class="krasivaya-animatsiya-6 aneasaku-3">
  <div class="akasenag-korobka">
  <img src="http://zornet.ru/ABVUN/Aba/detunis/supasnab/img-1.jpg" alt="картинка-3">
  </div>
  <div class="bekepo-ubavan">
  <h3>Название</h3>
  <p>Одна из лучших особенностей выбора InMotion для вашего хостинга заключается в том, что он поставляется.</p>
  <a href="#" class="btn">Learn more</a>
  </div>
  </div>
  </li>
  </ul>
  <!-- aneasaku-6 End -->
   
  <!-- aneasaku-7 -->
  <h2><span>Effects 7</span></h2>
  <ul>
  <li>
  <div class="krasivaya-animatsiya-7 aneasaku-1">
  <div class="akasenag-korobka">
  <img src="images/img-1.jpg" alt="картинка-1">
  </div>
  <div class="bekepo-ubavan">
  <h3>Название</h3>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  <a href="#" class="btn">смотреть далее</a>
  </div>
  </div>
  </li>
  <li>
  <div class="krasivaya-animatsiya-7 aneasaku-2">
  <div class="akasenag-korobka">
  <img src="http://zornet.ru/ABVUN/Aba/detunis/supasnab/img-1.jpg" alt="картинка-2">
  </div>
  <div class="bekepo-ubavan">
  <h3>Название</h3>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing.</p>
  <a href="#" class="btn">Learn more</a>
  </div>
  </div>
  </li>
  <li>
  <div class="krasivaya-animatsiya-7 aneasaku-3">
  <div class="akasenag-korobka">
  <img src="http://zornet.ru/ABVUN/Aba/detunis/supasnab/dsamipredsa.jpg" alt="картинка-3">
  </div>
  <div class="bekepo-ubavan">
  <h3>Название</h3>
  <p>в какие-либо технические аспекты - просто сидеть сложа руки и позволить автоматизации настроить сайт от вашего имени..</p>
  <a href="#" class="btn">смотреть далее</a>
  </div>
  </div>
  </li>
  </ul>
  <!-- aneasaku-7 End -->
   
  <!-- aneasaku-8 -->
  <h2><span>Effects 8</span></h2>
  <ul>
  <li>
  <div class="krasivaya-animatsiya-8 aneasaku-1">
  <div class="akasenag-korobka">
  <img src="http://zornet.ru/ABVUN/Aba/detunis/supasnab/dsamipredsa.jpg" alt="картинка-1">
  </div>
  <div class="bekepo-ubavan">
  <h3>Название</h3>
  <p>Их служба поддержки клиентов также заслуживает похвалы. Помимо доступности 24/7, команда поддержки может быть доступна по нескольким каналам.</p>
  <a href="#" class="btn">смотреть далее</a>
  </div>
  </div>
  </li>
  <li>
  <div class="krasivaya-animatsiya-8 aneasaku-2">
  <div class="akasenag-korobka">
  <img src="http://zornet.ru/ABVUN/Aba/detunis/supasnab/dsamipredsa.jpg" alt="картинка-2">
  </div>
  <div class="bekepo-ubavan">
  <h3>Название</h3>
  <p>Время работы гарантировано на уровне 99,99%, но временные сбои сообщаются время от времени.</p>
  <a href="#" class="btn">смотреть далее</a>
  </div>
  </div>
  </li>
  <li>
  <div class="krasivaya-animatsiya-8 aneasaku-3">
  <div class="akasenag-korobka">
  <img src="http://zornet.ru/ABVUN/Aba/detunis/supasnab/dsamipredsa.jpg" alt="картинка-3">
  </div>
  <div class="bekepo-ubavan">
  <h3>Название</h3>
  <p>Он также предлагает некоторые отличные функции электронной коммерции, включая интеграцию приложений, таких как WooCommerce.</p>
  <a href="#" class="btn">смотреть далее</a>
  </div>
  </div>
  </li>
  </ul>

  </div>
  </div>
  </div>


CSS

Код

html, body {border: 0; margin: 0; padding: 0;}
body { font: 14px "Lato", Arial, sans-serif; min-width: 100%; min-height: 100%; color: #666; background-color: #2D2D2D; }
.asybaledsam{margin: 0 auto; max-width: 1060px;}
h2{color: #fff; float: left; width: 100%; font-size: 24px; font-weight: 400; text-align: center; padding: 50px 0 40px; position: relative; z-index: 50;}
h2 span{position: relative; padding-bottom: 10px;}
h2 span:after{content: ""; width: 50%; height: 3px; background-color: #fff; position: absolute; left: 25%; bottom: 0;}
*{margin: 0; padding: 0; box-sizing: border-box;}
img{max-width: 100%; vertical-align: middle;}
.msanug-lopcag{width: 100%; float: left; padding-bottom: 80px;}
ul{margin: 0 -1.5%;}
li{float: left; width: 31.33%; margin: 10px 1%; list-style: none;}

h3{font-size: 20px; margin: 5px 0 10px;}
p{font-weight: 300; line-height: 20px; font-size: 14px; margin-bottom: 15px;}
.btn{display: inline-block; padding: 5px 10px; font-size: 14px; color: #fff; border: 2px solid #4d92d9; background-color: #4d92d9; text-decoration: none; transition: 0.4s;}
.btn:hover{background-color: transparent; color: #4d92d9; transition: 0.4s;}
.bekepo-ubavan{position: absolute; left: 0; top: 0; background-color: #fff; height: 100%; opacity: 0; width: 100%; padding: 20px;}
/*= Reset CSS End
================= *

/* aneasaku-1 css */
.krasivaya-animatsiya-1{float: left; width: 100%; position: relative; overflow: hidden; text-align: center; border: 4px solid rgba(255, 255, 255, 0.9);}
.krasivaya-animatsiya-1 .bekepo-ubavan{opacity: 0.9; top: -100%; transition: 0.5s; color: #000; padding: 45px 20px 20px;}
.krasivaya-animatsiya-1 img{transition: 0.5s;}
.krasivaya-animatsiya-1:hover img{transform: scale(1.2);}

.krasivaya-animatsiya-1.aneasaku-1:hover .bekepo-ubavan{top: 0;}

.krasivaya-animatsiya-1.aneasaku-2 .bekepo-ubavan{top: auto; bottom: -100%;}
.krasivaya-animatsiya-1.aneasaku-2:hover .bekepo-ubavan{bottom: 0;}

.krasivaya-animatsiya-1.aneasaku-3 .bekepo-ubavan{top: 50%; left: 50%; width: 0; height: 0; overflow: hidden; padding: 0;}
.krasivaya-animatsiya-1.aneasaku-3:hover .bekepo-ubavan{width: 100%; top: 0; left: 0; height: 100%; padding: 45px 20px 20px;}
/* aneasaku-1 css end */

/* aneasaku-2 css */
.krasivaya-animatsiya-2{float: left; width: 100%; position: relative; overflow: hidden; text-align: center; border: 4px solid rgba(255, 255, 255, 0.9); perspective: 800px;}
.krasivaya-animatsiya-2 .bekepo-ubavan{z-index: -1; transition: 0.6s;}
.krasivaya-animatsiya-2 .akasenag-korobka{transition: 0.4s;}
.krasivaya-animatsiya-2:hover .akasenag-korobka{transform: rotateX(80deg); transform-origin: center bottom 0; transition: 0.4s;}

.krasivaya-animatsiya-2.aneasaku-1:hover .bekepo-ubavan{opacity: 1;}

.krasivaya-animatsiya-2.aneasaku-2 .bekepo-ubavan{opacity: 1; top: -100%;}
.krasivaya-animatsiya-2.aneasaku-2:hover .bekepo-ubavan{top: 0;}

.krasivaya-animatsiya-2.aneasaku-3 .bekepo-ubavan{opacity: 1; top: auto; bottom: -100%;}
.krasivaya-animatsiya-2.aneasaku-3:hover .bekepo-ubavan{bottom: 0;}
/* aneasaku-2 css end */

/* aneasaku-3 css */
.krasivaya-animatsiya-3{float: left; width: 100%; position: relative; overflow: hidden; text-align: center; border: 4px solid rgba(255, 255, 255, 0.9); perspective: 500px;}
.krasivaya-animatsiya-3 img{transition: 0.5s;}

.krasivaya-animatsiya-3.aneasaku-1 .bekepo-ubavan{z-index: -1; transition: 0.5s; transform: rotateX(80deg); transform-origin: center top 0; padding: 45px 20px 20px; opacity: 1;}
.krasivaya-animatsiya-3.aneasaku-1:hover .bekepo-ubavan{transform: none;}
.krasivaya-animatsiya-3.aneasaku-1:hover img{opacity: 0; transform: scale(1.2)}

.krasivaya-animatsiya-3.aneasaku-2 .bekepo-ubavan{z-index: -1; transition: 0.5s; transform: rotateX(80deg); transform-origin: center bottom 0; top: auto; bottom: 0; padding: 45px 20px 20px;}
.krasivaya-animatsiya-3.aneasaku-2:hover .bekepo-ubavan{transform: none; opacity: 1;}
.krasivaya-animatsiya-3.aneasaku-2:hover img{transform: translateY(-100%)}

.krasivaya-animatsiya-3.aneasaku-3 .bekepo-ubavan{z-index: -1; transition: 0.5s; transform: rotateX(80deg); transform-origin: center top 0; padding: 45px 20px 20px;}
.krasivaya-animatsiya-3.aneasaku-3:hover .bekepo-ubavan{transform: none; opacity: 1;}
.krasivaya-animatsiya-3.aneasaku-3:hover img{transform: translateY(100%)}
/* aneasaku-3 css end */

/* aneasaku-4 css */
.krasivaya-animatsiya-4{float: left; width: 100%; position: relative; overflow: hidden; text-align: center; border: 4px solid rgba(255, 255, 255, 0.9); z-index: 10;}

.krasivaya-animatsiya-4.aneasaku-1 img{transition: 0.5s; transform: rotateY(360deg) scale(1, 1);}
.krasivaya-animatsiya-4.aneasaku-1 .bekepo-ubavan{transform: rotateY(0deg) scale(0, 0); transition: 0.5s; opacity: 0; padding: 45px 20px 20px;}
.krasivaya-animatsiya-4.aneasaku-1:hover .bekepo-ubavan{transform: rotateY(360deg) scale(1, 1); opacity: 1;}
.krasivaya-animatsiya-4.aneasaku-1:hover img{transform: rotateY(0deg) scale(0, 0);}

.krasivaya-animatsiya-4.aneasaku-2{z-index: 12;}
.krasivaya-animatsiya-4.aneasaku-2 img{transition: 0.5s; transform: rotateX(360deg) scale(1, 1);}
.krasivaya-animatsiya-4.aneasaku-2 .bekepo-ubavan{transform: rotateX(0deg) scale(0, 0); transition: 0.5s; opacity: 0; padding: 45px 20px 20px;}
.krasivaya-animatsiya-4.aneasaku-2:hover .bekepo-ubavan{transform: rotateX(360deg) scale(1, 1); opacity: 1;}
.krasivaya-animatsiya-4.aneasaku-2:hover img{transform: rotateX(0deg) scale(0, 0);}

.krasivaya-animatsiya-4.aneasaku-3 img{transition: 0.5s; transform: rotate(360deg) scale(1, 1);}
.krasivaya-animatsiya-4.aneasaku-3 .bekepo-ubavan{transform: rotate(0deg) scale(0, 0); transition: 0.5s; opacity: 0; padding: 45px 20px 20px;}
.krasivaya-animatsiya-4.aneasaku-3:hover .bekepo-ubavan{transform: rotate(360deg) scale(1, 1); opacity: 1;}
.krasivaya-animatsiya-4.aneasaku-3:hover img{transform: rotate(0deg) scale(0, 0);}
/* aneasaku-4 css end */

/* aneasaku-5 css */
.krasivaya-animatsiya-5{float: left; width: 100%; position: relative; overflow: hidden; text-align: center; border: 4px solid rgba(255, 255, 255, 0.9); overflow: visible;}

.krasivaya-animatsiya-5.aneasaku-1{z-index: 9;}
.krasivaya-animatsiya-5.aneasaku-1 img{transition: 0.5s;}
.krasivaya-animatsiya-5.aneasaku-1:hover img{transform: scale(0.5) translateX(-100%); position: relative; z-index: 9; border: 6px solid rgba(255, 255, 255, 0.9);}
.krasivaya-animatsiya-5.aneasaku-1 .bekepo-ubavan{transform: translateX(100%); opacity: 0; padding: 40px 20px 20px 90px; transition: 0.5s;}
.krasivaya-animatsiya-5.aneasaku-1:hover .bekepo-ubavan{transform: translateX(0px); opacity: 1;}

.krasivaya-animatsiya-5.aneasaku-2{z-index: 10;}
.krasivaya-animatsiya-5.aneasaku-2 img{transition: 0.5s; transform: none);}
.krasivaya-animatsiya-5.aneasaku-2:hover img{transform: scale(0.5) translateY(100%); position: relative; z-index: 9; border: 6px solid rgba(255, 255, 255, 0.9);}
.krasivaya-animatsiya-5.aneasaku-2 .bekepo-ubavan{transform: translateY(-100%); opacity: 0; padding: 20px; transition: 0.5s;}
.krasivaya-animatsiya-5.aneasaku-2:hover .bekepo-ubavan{transform: translateY(0px); opacity: 1;}

.krasivaya-animatsiya-5.aneasaku-3 img{transition: 0.5s;}
.krasivaya-animatsiya-5.aneasaku-3:hover img{transform: scale(0.5) translateX(100%); position: relative; z-index: 9; border: 6px solid rgba(255, 255, 255, 0.9);}
.krasivaya-animatsiya-5.aneasaku-3 .bekepo-ubavan{transform: translateX(-100%); opacity: 0; padding: 40px 90px 20px 20px; transition: 0.5s;}
.krasivaya-animatsiya-5.aneasaku-3:hover .bekepo-ubavan{transform: translateX(0px); opacity: 1;}
/* aneasaku-5 css end */

/* aneasaku-6 css */
.krasivaya-animatsiya-6{float: left; width: 100%; position: relative; overflow: hidden; text-align: center; border: 4px solid rgba(255, 255, 255, 0.9); overflow: visible;}

.krasivaya-animatsiya-6.aneasaku-1{z-index: 8;}
.krasivaya-animatsiya-6.aneasaku-1 img{transition: 0.5s;}
.krasivaya-animatsiya-6.aneasaku-1:hover img{transform: scale(0.3) translateY(110%); position: relative; z-index: 9;}
.krasivaya-animatsiya-6.aneasaku-1 .bekepo-ubavan{transform: translateY(-100%); opacity: 0; padding: 10px 20px; transition: 0.5s;}
.krasivaya-animatsiya-6.aneasaku-1:hover .bekepo-ubavan{transform: translateY(0px); opacity: 1;}

.krasivaya-animatsiya-6.aneasaku-2{z-index: 7;}
.krasivaya-animatsiya-6.aneasaku-2 img{transition: 0.6s; z-index: 1;}
.krasivaya-animatsiya-6.aneasaku-2:hover img{transform: scale(0.3) translateX(110%); position: relative; z-index: 9;}
.krasivaya-animatsiya-6.aneasaku-2 .bekepo-ubavan{transform: translateX(-100%); opacity: 0; padding: 40px 120px 20px 20px; transition: 0.6s;}
.krasivaya-animatsiya-6.aneasaku-2:hover .bekepo-ubavan{transform: translateX(0px); opacity: 1;}

.krasivaya-animatsiya-6.aneasaku-3 img{transition: 0.5s;}
.krasivaya-animatsiya-6.aneasaku-3:hover img{transform: scale(0.3) translateY(-110%); position: relative; z-index: 9;}
.krasivaya-animatsiya-6.aneasaku-3 .bekepo-ubavan{transform: translateY(100%); opacity: 0; padding: 85px 20px 10px; transition: 0.5s;}
.krasivaya-animatsiya-6.aneasaku-3:hover .bekepo-ubavan{transform: translateY(0px); opacity: 1;}
/* aneasaku-6 css end */

/* aneasaku-7 css */
.krasivaya-animatsiya-7{float: left; width: 100%; position: relative; overflow: hidden; text-align: center; border: 4px solid rgba(255, 255, 255, 0.9); overflow: hidden;}
.krasivaya-animatsiya-7 .bekepo-ubavan{opacity: 0; transition: 0.5s; color: #000;}

.krasivaya-animatsiya-7.aneasaku-1 img{transition: 0.5s; position: relative; width: 100%; left: 0;}
.krasivaya-animatsiya-7.aneasaku-1:hover img{left: 50%;}
.krasivaya-animatsiya-7.aneasaku-1 .bekepo-ubavan{transform: perspective(600px) rotateY(90deg); transform-origin: left center 0; width: 50%; position: absolute; left: 0; top: 0; padding: 18px 10px;}
.krasivaya-animatsiya-7.aneasaku-1:hover .bekepo-ubavan{opacity: 1; transform: perspective(600px) rotateY(0deg); z-index: 99;}

.krasivaya-animatsiya-7.aneasaku-2 img{transition: 0.5s; position: relative; width: 100%; top: 0;}
.krasivaya-animatsiya-7.aneasaku-2:hover img{top: 50%;}
.krasivaya-animatsiya-7.aneasaku-2 .bekepo-ubavan{transform: perspective(600px) rotateX(90deg); transform-origin: top center 0; width: 100%; position: absolute; left: 0; top: 0; height: 50%; padding: 5px 10px;}
.krasivaya-animatsiya-7.aneasaku-2:hover .bekepo-ubavan{opacity: 1; transform: perspective(600px) rotateX(0deg); z-index: 99;}

.krasivaya-animatsiya-7.aneasaku-3 img{transition: 0.5s; position: relative; width: 100%; right: 0;}
.krasivaya-animatsiya-7.aneasaku-3:hover img{right: 50%;}
.krasivaya-animatsiya-7.aneasaku-3 .bekepo-ubavan{transform: perspective(600px) rotateY(-90deg); transform-origin: right center 0; width: 50%; position: absolute; left: auto; right: 0; top: 0; padding: 18px 10px;}
.krasivaya-animatsiya-7.aneasaku-3:hover .bekepo-ubavan{opacity: 1; transform: perspective(600px) rotateY(0deg); z-index: 99;}
/* aneasaku-7 css end */

/* aneasaku-8 css */
.krasivaya-animatsiya-8{float: left; width: 100%; position: relative; overflow: hidden; text-align: center; border: 4px solid rgba(255, 255, 255, 0.9); overflow: hidden;}
.krasivaya-animatsiya-8 .bekepo-ubavan{opacity: 0; transition: 0.5s; color: #000; padding: 45px 20px 20px;}

.krasivaya-animatsiya-8.aneasaku-1 img{transition: 0.5s;}
.krasivaya-animatsiya-8.aneasaku-1:hover img{transform: scale(1.1);}
.krasivaya-animatsiya-8.aneasaku-1 .bekepo-ubavan{left: 0; position: absolute; top: 0; width: 100%; height: 100%; transform: scale(0); backface-visibility: hidden;}
.krasivaya-animatsiya-8.aneasaku-1:hover .bekepo-ubavan{opacity: 1; transform: scale(1); border-radius: 20%;}

.krasivaya-animatsiya-8.aneasaku-2 img{transition: 0.5s;}
.krasivaya-animatsiya-8.aneasaku-2:hover img{transform: scale(1.1);}
.krasivaya-animatsiya-8.aneasaku-2 .bekepo-ubavan{left: 0; position: absolute; top: 0; width: 100%; height: 100%; transform: scale(0); backface-visibility: hidden;}
.krasivaya-animatsiya-8.aneasaku-2:hover .bekepo-ubavan{opacity: 1; transform: scale(1); border-radius: 50% 0 50% 0;}

.krasivaya-animatsiya-8.aneasaku-2 img{transition: 0.5s;}
.krasivaya-animatsiya-8.aneasaku-2:hover img{transform: scale(1.1);}
.krasivaya-animatsiya-8.aneasaku-2 .bekepo-ubavan{left: 0; position: absolute; top: 0; width: 100%; height: 100%; transform: scale(0); backface-visibility: hidden;}
.krasivaya-animatsiya-8.aneasaku-2:hover .bekepo-ubavan{opacity: 1; transform: scale(1); border-radius: 50% 0 50% 0;}

.krasivaya-animatsiya-8.aneasaku-3 img{transition: 0.5s;}
.krasivaya-animatsiya-8.aneasaku-3:hover img{transform: scale(1.1);}
.krasivaya-animatsiya-8.aneasaku-3 .bekepo-ubavan{left: 0; position: absolute; top: 0; width: 100%; height: 100%; transform: scale(0); backface-visibility: hidden; background: none; padding: 40px 70px 20px;}
.krasivaya-animatsiya-8.aneasaku-3 .bekepo-ubavan:before, .krasivaya-animatsiya-8.aneasaku-3 .bekepo-ubavan:after{background-color: #fff; border-radius: 50% 50% 0 0; content: ""; height: 100%; left: 50%; position: absolute; top: 0; transform: rotate(-50deg); transform-origin: 0 100% 0; width: 50%; z-index: -1;}
.krasivaya-animatsiya-8.aneasaku-3 .bekepo-ubavan:after {left: 0; transform: rotate(50deg); transform-origin: 100% 100% 0;}
.krasivaya-animatsiya-8.aneasaku-3:hover .bekepo-ubavan{opacity: 1; transform: scale(1);}
/* aneasaku-8 css end */

/*= Media Screen CSS
==================== */
@media only screen and (max-width: 1090px){
  ul{width: 340px; margin: 0 auto;}
  li{width: 100%; margin: 20px 0;}
  .krasivaya-animatsiya-5.aneasaku-1 {z-index: 19;}
}

@media only screen and (max-width: 360px){
  ul{width: 300px;}
  .krasivaya-animatsiya-1 .bekepo-ubavan,  
  .krasivaya-animatsiya-1.aneasaku-3:hover .bekepo-ubavan,  
  .krasivaya-animatsiya-3.aneasaku-1 .bekepo-ubavan,  
  .krasivaya-animatsiya-3.aneasaku-3 .bekepo-ubavan,
  .krasivaya-animatsiya-4.aneasaku-1 .bekepo-ubavan,
  .krasivaya-animatsiya-4.aneasaku-2 .bekepo-ubavan,
  .krasivaya-animatsiya-4.aneasaku-3 .bekepo-ubavan, .krasivaya-animatsiya-8 .bekepo-ubavan{padding: 20px;}
  .bekepo-ubavan{padding: 7px;}
  .krasivaya-animatsiya-5.aneasaku-1 .bekepo-ubavan{padding: 13px 20px 20px 90px;}
  .krasivaya-animatsiya-5.aneasaku-2 .bekepo-ubavan{padding: 10px;}
  .krasivaya-animatsiya-5.aneasaku-3 .bekepo-ubavan{padding: 16px 90px 20px 20px;}
  .krasivaya-animatsiya-6.aneasaku-1 .bekepo-ubavan .btn,  
  .krasivaya-animatsiya-6.aneasaku-2 .bekepo-ubavan .btn,
  .krasivaya-animatsiya-6.aneasaku-3 .bekepo-ubavan .btn,
  .krasivaya-animatsiya-7.aneasaku-1 .bekepo-ubavan .btn,
  .krasivaya-animatsiya-7.aneasaku-2 .bekepo-ubavan .btn,
  .krasivaya-animatsiya-7.aneasaku-3 .bekepo-ubavan .btn,
  .krasivaya-animatsiya-8.aneasaku-3 .bekepo-ubavan .btn{display: none;}
  .krasivaya-animatsiya-6.aneasaku-2 .bekepo-ubavan{padding: 20px 120px 20px 20px;}
  .krasivaya-animatsiya-6.aneasaku-3 .bekepo-ubavan{padding: 75px 20px 10px;}
  .krasivaya-animatsiya-7.aneasaku-1 .bekepo-ubavan{padding: 12px 10px;}
  .krasivaya-animatsiya-8.aneasaku-3 .bekepo-ubavan{padding: 28px 70px 20px;}
}


Стили, что закреплены под код, то здесь они все под значением прописаны, чтоб выбрав нужный вам эффект, вы можете по этому номеру сразу добавить под установку. Ведь изначально идет один стиль и код, это как основа, а которые пронумерованы, это уже закрепленные эффекты при наведении на изображение.

Демонстрация

Скачать 8 классных эффектов при наведении на CSS
Категория: Скачать Скрипты для Ucoz | Добавил: Marco
Просмотров: 37 | Загрузок: 0 | Рейтинг: 0.0/0


Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]
Вход на сайт

Поиск

Популярное
SLS-Склад Лайт 
Feedmaster 1.7.4.2 бесплатно. 
Atlantis Word Processor 1.6.2 Beta 
Mozilla Sunbird 0.9 RU 
Фото на документы Экспресс 1.51 Rus 

На форуме
Файлообменник. З...
Автор: roterb
Форум: Куплю/Продам
Дата: 19.07.2024
Ответов: 0
Куплю, обмен шве...
Автор: roterb
Форум: Куплю/Продам
Дата: 27.06.2024
Ответов: 0
Файлообменник Sh...
Автор: Marco
Форум: Заработок на Файлообменниках
Дата: 27.06.2024
Ответов: 1
Заработок на фай...
Автор: Marco
Форум: Заработок на Файлообменниках
Дата: 27.06.2024
Ответов: 1
Файлообменник Le...
Автор: Marco
Форум: Заработок на Файлообменниках
Дата: 27.06.2024
Ответов: 1

Популярное

Партнеры сайта
Стать партнером Стать партнером Стать партнером Стать партнером

Copyright MyCorp © 2024