Эффект лёгкого движения картинки на CSS.

Всем доброго времени суток. Предлагаю вашему вниманию очередной  эффект движения картинки. При наведении курсора на изображение, оно немного приподнимается снизу. Ещё красивые эффекты для изображений. Сложного ничего нет.
Некоторые пояснения будут в конце этого сообщения. А сейчас смотрим на сам результат.

Код следующий. Лучше будет если вы сначала скопируете себе в блокнот или черновик, чтобы установить свои картинки.

<style>
.liftup{
    padding: 5px;
    position: relative;
 width: 200px;
 height: 150px;
 overflow: hidden;
    border: 1px solid black;
    background: black;
    color: white;
    box-shadow: 0 0 0 gray;
    -moz-transition: all 0.3s;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
    float: left;
    margin-right: 10px;
    margin-bottom: 10px;
}

.liftup:hover{
    -moz-transition: all 0.3s;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
    -moz-transform: rotateX(20deg);
    -webkit-transform: rotateX(20deg);
    transform: rotateX(20deg);
    -moz-transform-origin: 50% 0;
    -webkit-transform-origin: 50% 0;
    transform-origin: 50% 0;
    box-shadow: 0 20px 20px -5px gray;
}

.liftup img{
  width: 200px;
  height: 150px;
}

</style>

<div class="liftup">
<img src="Адрес вашей картинки " /></div>

Если нужно, чтобы картинка была ссылкой на определённую страницу ( об этом здесь), добавьте в строку, которая отмечена синим цветом следующее.

<img src="Адрес вашей картинки " /><a href="Адрес страницы куда должна вести ссылка" target=_blank></a></div>

Посмотрите на этом блоге, как можно подобным образом установить несколько картинок. Такая красивая галерея получается.  Для этого добавляем соответственно в коде дополнительно.
<div class="liftup">
<img src="адрес вашего изображения 1" /></div>

<div class="liftup">
<img src="адрес изображения 2 " /></div>
<div class="liftup">
<img src="адрес изображения 3" /></div>

И ещё момент для начинающих. В этом блоге основной фон я сделала чёрным цветом. Значение background: black; а на тестовом-зелёным background: green ; Выбирайте подходящий для вас. Вот некоторые - cream (кремовый), gold (золотой), blue ( синий),  brown (коричневый), yellow (жёлтый), pink (розовый). И будьте внимательны ко всем точкам, двоеточиям и прочим символам.

Устанавливаем код эффекта движения картинок, перейдя в редакторе в режим HTML, в нужном месте. Или в гаджет. Обратите внимание  на ширину и высоту изображений - отмечено зелёным цветом.

И не буду больше отнимать у вас драгоценное время. Спасибо за ваш визит. Пробуйте поработать с картинкам. Увидимся.
  

здесь можно оформить подписку на новые шпаргалки

Введите Ваш email