Ефект на леко движение на изображенията в блога

Добър ден, приятели. Предлагам на вашето внимание още един ефект на движение на изображения във вашия блог. Когато поставите курсора върху изображението, то леко се повдига нагоре. Вижте тези по-интересни ефекти за изображенията. Нищо сложно. Ако искате да разнообразите общата визия на своя публикация, пробвайте този ефект на движение на изображения. Някои обяснения за ефекта ще бъдат описани в края на публикацията. А сега да погледнем крайния резултат.

Кодът е следният. Ще е добре, ако първо го копирате в блокнот или в уърдовски файл, за да изберете и впишете адреса на своите изображения в него.

<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>

<div class="liftup">
<img src="адрес на вашето изображениe 1" /></div>

<div class="liftup">
<img src="адрес на вашето изображениe 2 " /></div>
<div class="liftup">
<img src="адрес на вашето изображениe 3" /></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;). Значението на фона можете да промените, като изберете най-подходящия за вас. Вместо значението  "black" можете да използвате едно от следните: cream (кремаво), gold (златно), blue ( синьо), brown (кафяво), yellow (жълто), pink (розово).
И моля, бъдете внимателни с всички точки, двуеточия, както и с другите символи в кода.
И още един ефект.  Неговият код е:

<div class="grow pic">
<img src="адрес на изображението" alt="целувка">
</div>
CSS
<style>.grow img {
height: 200px; / височина преди/
width: 200px;-webkit-transition: all 1s ease;/ширина преди/
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}.grow img:hover {
width: 400px;/височина след/
height: 400px;/ширина след/
}</style>

Инсталирайте кода в редактора в HTML режим на необходимото ви място. Или в притурка. Обърнете внимание на ширината и височината на изображението, те са маркирани в зелено.

И за да не губя от ценното ви време ви благодаря за посещението.

Опитайте се да работите с изображения. Ще си видим скоро.

Здраве за всички вас! Не забравяйте да правите добро на други хора!

Ще съм благодарна да оцените моя труд гласувате за блога на: