1. Home
  2. /
  3. Уроки css
  4. /
  5. Оригинальные hover-эффекты на чистом...

Оригинальные hover-эффекты на чистом CSS

В данном уроке продолжаем работать с CSS, реализуем различные эффекты при наведение на объект
<div class="tdimension"> <a href="#"><img class="" src="адрес" alt=" "></a> </div> /* 3D Transform */ .tdimension { width: 300px; height: 300px; margin: 20px auto 40px auto; perspective: 1000px; } .tdimension a { display: block; width: 100%; height: 100%; background:linear-gradient(to bottom, #f2f5f6 0%,#e3eaed 37%,#c8d7dc 100%); background-size: cover; transform-style: preserve-3d; transform: rotateX(70deg); transition: all 0.8s; } .tdimension:hover a { transform: rotateX(20deg); } .tdimension a:after { content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 40px; background: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.1)); transform: rotateX(90deg); transform-origin: bottom; }
Hover Effect с пояснением
C Новым годом!
Многоглазый дед-мороз Он подарки нам принес:
Шорох скрытых измерений, Тайны мертвых поколений,
Ритуальный нож и блюдо, Взгляд существ, что не отсюда,
Звезд погасших черный свет, Ядовитый лед с комет, Шупальца грибов с Юггота
Все для нового, для года!
<div class="frame"> <img src="адрес"> <div class="details"> <h1>Lorem</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam lorem nunc, sollicitudin a nisi sodales, imperdiet dignissim enim. Nam sapien quam</p> </div></div>
.frame {
    cursor: pointer;
    perspective: 500px;
    position: relative;
    text-align: center;
    max-width: 300px;
    margin: 0 auto;
}
.frame img {
    max-height: 290px;
    max-width: 290px;
}
.frame .details {
    background: linear-gradient(to bottom, #f9fcf7 0%,#f5f9f0 100%) repeat scroll 0 0;
    content: "";
    height: 80%;
    left: 50%;
    opacity: 0;
    padding: 1px;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%) rotateY(90deg);
    transform-origin: 50% 50% 0;
    transition: all 0.4s ease-in 0s;
    width: 80%;
}
.frame:hover .details {
    opacity: 1;
    transform: translate(-50%, -50%) rotateY(0deg);
}

Отсвет
Hover
Hover
Hover
<div class="hover14"> <div> <figure><img src="адрес картинки" /></figure> <span>Hover</span> </div> <div> <figure><img src="адрес картинки" /></figure> <span>Hover</span> </div> <div> <figure><img src="адрес картинки" /></figure> <span>Hover</span> </div> </div>
/* Shine */
.hover14 figure {
    position: relative;
    max-width: 320px;
}
.hover14 figure::before {
    background: rgba(0, 0, 0, 0) linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 100%) repeat scroll 0 0;
    content: "";
    display: block;
    height: 100%;
    left: -125%;
    position: absolute;
    top: 0;
    transform: skewX(-25deg);
    width: 100%;
    z-index: 2;
}

.hover14 span {
    bottom: -10px;
    color: #444;
    display: block;
    left: 0;
    margin: 0;
    opacity: 0;
    padding: 0;
    position: relative;
    text-align: center;
    text-decoration: none;
    transition: all 0.3s ease-in-out 0s;
    visibility: hidden;
    max-width: 100%;
}
.hover14 div>figure {
    background: none repeat scroll 0 0;
    height: 300px;
    margin: 0;
    overflow: hidden;
    padding: 0;
    max-width: 320px;
}
.hover14 figure:hover + span {
    bottom: -1px !important;
    opacity: 1;
    visibility: visible;
    position: relative;
}
div.hover14 div {
    display: table-row;
    margin: 0 auto;
    max-height: 100%;
    max-width: 100%;
    padding: 0;
    position: inherit;
}
.hover14 figure:hover::before {
-webkit-animation: shine .75s;
    animation: 0.75s ease 0s normal none 2 running shine;
}
@keyframes shine {
100% {
    left: 35%;
}
}
@keyframes shine {
100% {
    left: 35%;
}
}


Можно выстроить изображения в линию заменив код!
div.hover14 div {
    display: block;
    margin: 5px 12px;
    max-height: 100%;
    max-width: 320px;
    padding: 0;
    position: inherit;
    float: left;
}

Таблички с изменяющимся цветом и фоном.

Я люблю свою работу! Я приду сюда в субботу, И конечно воскресенье. Здесь я встречу День Рождения, Новый год, 8 Марта. Ночевать здесь буду завтра. Плащ-палатка, вещь мешок — у супруга будет шок! Если я не заболею, не сорвусь, не озверею, Здесь я встречу все рассветы, все закаты и приветы! От работы дохнут кони. Ну, а я — бессмертный пони!!!

Конь педальный

Вы посмотрите – всё имеем, а жить не можем. Ну не можем жить! Никак всё нас тянет на эксперименты. Всё нам что-то надо туда, достать там, где-то, когда-то, устроить кому-то. Почему не себе?! Почему не своему поколению?! Почему этот, как говорится, зародился тот же коммунизм, бродил по Европе, призрак, вернее. Бродил-бродил, у них нигде не зацепился! А у нас – пожалуйста! И вот – уже сколько лет под экспериментом.

Черномырдин

Я тоже несу большую нагрузку. И у меня тоже голос сел. А я ведь даже вчера не пил. И другого ничего не делал. Я бы это с удовольствием сделал

Черномырдин

<div class="col"> <div class="quotes-text"> <div class="box-text box-text1"> <p>The first step toward success is taken when you refuse to be a captive of the environment in which you first find yourself. </p> <h2>Mark Caine</h2> </div> <div class="bg"></div></div> <div class="quotes-text"> <div class="box-text box-text2"> <p>Your smile will give you a positive countenance that will make people feel comfortable around you. </p> <h2>Les Brown</h2> </div> <div class="bg"></div></div> <div class="quotes-text"> <div class="box-text box-text3"> <p>Before anything else, preparation is the key to success. </p> <h2>Alexander Graham Bell</h2> </div> <div class="bg"></div> </div> </div>
/* CSS Box Hover with Background Effect*/
.quotes-text {
    display: table-cell;
    float: left;
    min-height: 400px;
    width: 30%;
    z-index: 2;
    margin: 0 5px;
}
.quotes-text .box-text {
    background: #f2f2f2 none repeat scroll 0 0;
    height: auto;
    min-height: 320px;
    overflow: hidden;
    padding: 5px;
    position: relative;
    transition: all 0.5s ease-in 0s;
    width: 100%;
    z-index: 2;
    float: left;
    display: table-cell;
   border: 1px solid #ccc;
    border-radius: 10px 10px 0 0;
    box-shadow: 0 10px 6px -6px #ccc;
}
.quotes-text .box-text::before {
    background: transparent none repeat scroll 0 0;
    content: "\201C";
    font-size: 120px;
    height: 100%;
    left: 5px;
    opacity: 0.2;
    pointer-events: none;
    position: absolute;
    top: -20px;
    width: 100%;
}
.quotes-text .box-text::after {
    background: transparent none repeat scroll 0 0;
    bottom: -10%;
    content: "\201d";
    font-size: 120px;
    opacity: 0.2;
    pointer-events: none;
    position: absolute;
    right: 5%;
}
.quotes-text .box-text p {
    margin: 0;
    padding: 15px;
}
.quotes-text .box-text h2 {
    bottom: 2%;
    margin: 0;
    padding: 0;
    position: absolute;
    right: 2%;
}
.quotes-text .box-text:hover {
    color: #111;
}
.quotes-text .bg {
    height: 30px;
    left: 0;
    opacity: 0;
    overflow: hidden;
    pointer-events: none;
    position: inherit;
    top: 0;
    transition: all 0.5s ease-in 0s;
    width: 100%;
    z-index: 0;
}
.quotes-text .box-text.box-text1:hover, .quotes-text .box-text.box-text1:hover ~ .bg {
    background:  linear-gradient(135deg, #fdfcfb 0%, #e2d1c3 100%);
    opacity: 1;
}
.quotes-text .box-text.box-text2:hover, .quotes-text .box-text.box-text2:hover ~ .bg {
    background: linear-gradient(to top, #cfd9df 0%, #e2ebf0 100%);
    opacity: 1;
}
.quotes-text .box-text.box-text3:hover, .quotes-text .box-text.box-text3:hover ~ .bg {
    background: linear-gradient(to top, #c1dfc4 0%, #deecdd 100%);
    opacity: 1;
}
.col {
    align-items: center;
    display: table;
    margin: 0;
    padding: 2px;
}
@media screen and (max-width: 768px) {
.quotes-text .box-text {
  width: 100%;
}

.quotes-text {
  
    width: 100%;
}
}

предыдущий
следующий


  1. Home
  2. /
  3. Уроки css
  4. /
  5. Оригинальные hover-эффекты на чистом...

Архивы

Рубрики

Друзья сайта

Метки

Яндекс.Метрика