<MyRusakov.ru />

Laravel от А до Я

Laravel от А до Я

Данный курс научит Вас создавать профессиональные сайты быстро и легко с помощью Laravel. Курс состоит из 7 разделов, в которых Вы с нуля освоите данный фреймворк до уровня, достаточном для создания любых сайтов.

Помимо курса Вы также получите упражнения для закрепления материала, а попутно ещё и создадите свой сайт, что позволит отлично закрепить материал на практике, плюс получить серьёзную работу в своё портфолио.

К курсу прилагается и очень ценный Бонус: «Создание сайта на Laravel». В этом Бонусе Вы увидите практический пример создания полноценного сайта на Laravel.

Подробнее
Подписка

Подпишитесь на мой канал на YouTube, где я регулярно публикую новые видео.

YouTube Подписаться

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Зачем Вы изучаете программирование/создание сайтов?

Замена картинки с искажением при наведении

Замена картинки с искажением при наведении

Как плавно заменить одно изображение на другое при наведении мыши, не меняя сам фон? Для этого нам понадобиться три изображения: два из них на прозрачном фоне (мужчина и женщина) и сам фон (пшеничное поле).



Замена картинки с искажением при наведении.


HTML разметка

Поместим в контейнер imgBx две фотографии.

<div class="imgBx">
    <img src="img1.png">
    <img src="img2.png">
</div>


Замена картинки с искажением при наведении.


Девушка на фоне

Поставим обе фотографии в центр страницы друг под другом и установим для класса imgBx фон с пшеничным полем. Фотография девушки окажется на этом фоне. А все что выходит за рамки размеров 400x500 пикселей, спрячем при помощи свойства overflow: hidden. Сейчас мы видим только одну девушку на фоне пшеницы.

*{
    margin: 0;/*обнуление отступов*/
    padding: 0;/*обнуление полей*/
    box-sizing: border-box;/*правило расчета размеров блоков*/
}
body{
    display: flex;/*flexbox сетка*/
    justify-content: center;/*горизонтальное выравнивание*/
    align-items: center;/*вертикальное выравнивание*/
    min-height: 100vh;/*на вю высоту экрана*/
}
.imgBx{
    position: relative;/*относительное позиционирование*/
    width: 400px;/*ширина*/
    height: 500px;/*высота*/
    overflow: hidden;/*спрятать лишнее*/
    background: url(bg.jpg);/*вставка фона*/
    background-size: cover;/*на весь бокс с пропорциями*/
}


Замена картинки с искажением при наведении.


Наложение одной картинки поверх другой

Сейчас мы видим одновременно две фотографии.

.imgBx img{
    position: absolute;/*абсолютное позиционирование*/
    top: 0;/*позиция сверху*/
    bottom: 0;/*позиция снизу*/
    width: 100%;
    height: 100%;
    background-size: cover;
    transition: 1s;/*плавный переход*/
    pointer-events: none;
}


Замена картинки с искажением при наведении.


Hover-эффект

Обратимся к первому элементу (девушке) и применим прозрачность, фильтр размытия и трансформацию.

.imgBx img:nth-child(1){
    opacity: 0;/*значение прозрачности*/
    filter: blur(10px);/*сила размытия*/
    transform: translateX(50%) scaleX(2);/*перемещение влево и увеличение*/
}


Замена картинки с искажением при наведении.


Как происходим смена картинок при наведении? Мы поо череди обращаемся то к первому элементу, то ко второму и играем с прозрачностью и трансформацией. Теперь на пшеничном поле всегда будет только одно изображение.

.imgBx:hover img:nth-child(2){
    opacity: 0;
    filter: blur(10px);
    transform: translateX(-50%) scaleX(2);
}
.imgBx:hover img:nth-child(1){
    opacity: 1;
    filter: blur(0px);
    transform: translateX(0) scaleX(1);/*возвращение назад и уменьшение*/
}

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии (0):

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.