• Страница 1 из 1
  • 1
Форум » Записки веб-разработчика » Начинающему вебмастеру » Эффект уменьшение изображения с помощью CSS (Создать эффект уменьшение при наведения на изображения CSS)
Эффект уменьшение изображения с помощью CSS
Kosten
Дата: Четверг, 2018-06-14, 19:42 | Сообщение 1
Администраторы
Сообщений:18439
Награды: 55


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

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

Проверено на работоспособность, где все отлично по эффектам работает:



HTML

Код
   <div class="gtunilaskan lazedaqu-milstopsan">
        <div>
            <figure><img src="http://zornet.ru/ABVUN/sarunolas/zornet/7810977.jpg" /></figure>
            <span>Марвел</span>
        </div>
        <div>
            <figure><img src="http://zornet.ru/ABVUN/sarunolas/zornet/8320312.jpg" /></figure>
            <span>Капитан</span>
        </div>
        <div>
            <figure><img src="http://zornet.ru/ABVUN/sarunolas/zornet/6802803.jpg" /></figure>
            <span>ZORNET.RU</span>
        </div>
    </div>


CSS

Код
.lazedaqu-milstopsan {
    margin: 14px 14px 0;
    padding: 0;
}
.lazedaqu-milstopsan:last-child {
    padding-bottom: 59px;
}
.lazedaqu-milstopsan::after {
    content: '';
    clear: both;
    display: block;
}
.lazedaqu-milstopsan div {
    position: relative;
    float: left;
    width: 300px;
    height: 195px;
    margin: 0 0 0 24px;
    padding: 0;
}
.lazedaqu-milstopsan div:first-child {
    margin-left: 0;
}
.lazedaqu-milstopsan div span {
    position: absolute;
    bottom: -20px;
    left: 0;
    z-index: -1;
    display: block;
    width: 297px;
    margin: 0;
    padding: 0;
    color: #5f5b5b;
    font-size: 17px;
    text-decoration: none;
    text-align: center;
    -webkit-transition: .3s ease-in-out;
    transition: .3s ease-in-out;
    opacity: 0;
}
figure {
    width: 298px;
    height: 275px;
    margin: 0;
    padding: 0;
    background: #fff;
    overflow: hidden;
}
figure:hover+span {
    bottom: -36px;
    opacity: 1;
}

/* Zoom Out */

.gtunilaskan figure img {
    -webkit-transform: scale(1.5);
    transform: scale(1.5);
    -webkit-transition: .3s ease-in-out;
    transition: .3s ease-in-out;
}
.gtunilaskan figure:hover img {
    -webkit-transform: scale(1);
    transform: scale(1);
}


Здесь в стилях есть возможность самостоятельно украмить картинку, это сделать красивый обвод или добавить тень, которая будет подчеркивать саму основу.

Демонстрация
Прикрепления: 4223043.jpg(48.9 Kb)
Страна: (RU)
Kosten
Дата: Суббота, 2018-06-16, 23:03 | Сообщение 2
Администраторы
Сообщений:18439
Награды: 55


Не все изображения в сети интернете идут под форматом SVG. Иногда вам нужно подключить фотографию или изображения в формате PNG, GIF и JPG, что являются «растровыми изображениями», что означает, что они определяются по пикселям вместо векторов. В результате они гораздо более чувствительны к разрешению экрана, чем SVG. Если вас не волнует оптимизация, чувствительные растровые изображения действительно не намного сложнее, чем использование изображений SVG.

HTML

Код
<div class='section content'>
  <div class='katukipaqensa'>
    <img src='ссылка на изображение' style='max-width: 500px'/>
  </div>
</div>


Мы немного изменили структуру HTML, вставив наш img тег в другой контейнер. Без него изображение будет искажено, потому что flexbox попытается установить его высоту таким же, как content контейнер. Это требует небольшой настройки для нашего CSS:

CSS

Код
.katukipaqensa img {
  width: 100%;
  display: block;
}


Также обратите внимание на файл изображения. Это версия PNG с высоким разрешением, которая имеет размеры 1000 × 500. Для устройств Retina этот размер «2x» необходим для четкого отображения изображения. Если бы мы использовали версию этого изображения с низким разрешением (500 × 250 пикселей), она выглядела бы нормально на стандартных экранах, но была бы нечеткой на сетчатых устройствах.



Подумайте об этом, ленивый способ создать отзывчивые изображения PNG, GIF или JPG, так как предполагает, что всем нужен образ с высоким разрешением, даже если они этого не делают. Иными словами, изображение размером 1000 × 500 пикселей является излишним для устройств, не содержащих сетчатки. Мы поговорим об этом в следующем разделе.
Прикрепления: 3238817.png(29.2 Kb)
Страна: (RU)
Форум » Записки веб-разработчика » Начинающему вебмастеру » Эффект уменьшение изображения с помощью CSS (Создать эффект уменьшение при наведения на изображения CSS)
  • Страница 1 из 1
  • 1
Поиск: