Zoom in - збільшення елемента в середині іншого

а також jquery, bootstrap.
Мобільні шаблони.
Відповісти [phpBB Debug] PHP Warning: in file [ROOT]/vendor/twig/twig/lib/Twig/Extension/Core.php on line 1266: count(): Parameter must be an array or an object that implements Countable
Аватар користувача
my3uka
SEO Master
Повідомлень: 113
З нами з: Нед жовтня 18, 2015 8:33 am
Звідки: Ukraine
[phpBB Debug] PHP Warning: in file [ROOT]/vendor/twig/twig/lib/Twig/Extension/Core.php on line 1266: count(): Parameter must be an array or an object that implements Countable

Zoom in - збільшення елемента в середині іншого

Повідомлення my3uka » Чет лютого 20, 2020 7:10 am

Приклад 1:
HTML:

Код: Виділити все

<div id="container">
    <img id="image" src="http://placehold.it/150">
</div>
CSS:

Код: Виділити все

#container {
  display: inline-block;
  margin: 20px;
  border: 1px solid black;
  overflow: hidden;            /**/
}
#container img {
  display: block;
  transition: transform .4s;   /* час заякий буде відбуватись збілшення - zoom */
}
#container:hover img {
  transform: scale(1.3);
  transform-origin: 50% 50%;
}
Приклад 2:

HTML:

Код: Виділити все

<div class="image-box">
  <img src="https://source.unsplash.com/featured/?minimal,wallpaper,dark" alt="Unsplashed Random" width="540" height="548" />
</div>
CSS:

Код: Виділити все

* {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

.image-box {
    position: relative;
    margin: auto;
    overflow: hidden;
    width: 540px;
}
.image-box img {
    max-width: 100%;
    transition: all 2.0s;
    display: block;
    width: 100%;
    height: auto;
    transform: scale(1);
}

.image-box:hover img {
    transform: scale(1.9);
}
Рекомендую - VPS

Відповісти [phpBB Debug] PHP Warning: in file [ROOT]/vendor/twig/twig/lib/Twig/Extension/Core.php on line 1266: count(): Parameter must be an array or an object that implements Countable
[phpBB Debug] PHP Warning: in file [ROOT]/vendor/twig/twig/lib/Twig/Extension/Core.php on line 1266: count(): Parameter must be an array or an object that implements Countable
[phpBB Debug] PHP Warning: in file [ROOT]/vendor/twig/twig/lib/Twig/Extension/Core.php on line 1266: count(): Parameter must be an array or an object that implements Countable

Хто зараз онлайн

Зараз переглядають цей форум: 2 і 0 гостей