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

Код следующий. Лучше будет если вы сначала скопируете себе в блокнот или черновик, чтобы установить свои картинки.
<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>
.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>
<img src="адрес изображения 2 " /></div>
<div class="liftup">
<img src="адрес изображения 3" /></div>
И ещё момент для начинающих. В этом блоге основной фон я сделала чёрным цветом. Значение background: black; а на тестовом-зелёным background: green ; Выбирайте подходящий для вас. Вот некоторые - cream (кремовый), gold (золотой), blue ( синий), brown (коричневый), yellow (жёлтый), pink (розовый). И будьте внимательны ко всем точкам, двоеточиям и прочим символам.
И не буду больше отнимать у вас драгоценное время. Спасибо за ваш визит. Пробуйте поработать с картинкам. Увидимся.
здесь можно оформить подписку на новые шпаргалки
Здравствуйте, Вика! Интересный способ. Попробую внедрить его к себе на блог. Тем более, что это так интересно, познавать и добавлять в свою копилку знаний полезные вещи.
ОтветитьУдалитьСветлана, спасибо за отзыв. Вообще с CSS так интересно работать. Иногда просто фантастические вещи получаются.
ОтветитьУдалитьВика,здравствуйте.Удивляюсь себе, но у меня получилось с первого раза. Спасибо большое за Ваши шпаргалки.http://konovalovalf.blogspot.ru/
ОтветитьУдалитьЛюбовь, я уже была у вас в гостях и отметила эта. Так потихоньку и придёт понимание, что и как. Удачи Вам.
Удалить