Как преобразовать изображение при зависании

-1

Когда я перемещаю мышь на картинку, мне бы хотелось, чтобы изображение увеличивалось, но размер не увеличивается и что текст «выше» изображение слегка перемещается вверх, как в этом примере : https://vikingco.com/en/mobile-vikings/Как преобразовать изображение при зависании

Я уже пытался просмотреть исходный код, но не смог найти решение.

источник

2015-04-24 aertsTim

Для такого рода вещи, попробуйте использовать функцию браузера (или Firebug в) Web Inspector (щелкните правой кнопкой мыши на элементе -> Проверить элемент). Вы сможете точно определить, какие правила CSS применяются между состояниями зависания и многое другое. – Graham

Если вы просматриваете ссылку, похоже, что они используют изображение в качестве фона ссылки и селектор: hover, который добавляет 'transform: scale3d (1.1.1.1,1)'. Вероятно, вы можете использовать: hover, чтобы добавить некоторый css, чтобы текст выглядел немного выше, а также – Robert

Они сделали это с переходами CSS3. Принимая некоторые биты с их сайта, это показывает подход для фонового изображения, которые затем могут быть применены к заголовкам и т.д.

Учитывая этот HTML:

<article class="grid-50 tablet-50 phablet-100 item-holder"> 
    <a href="/en/mobile-vikings/news/new-website-same-spirit/" class="item" style="background-image:url(https://s3-eu-west-1.amazonaws.com/pulse-be-media/content/uploads/2015/04/Pulse-2.jpg);"></a> 
    <div class="caption"> 
    <span class="label action">Mobile Vikings</span> 
    <span class="label action">Viking Talk</span> 
    <span class="label action">VikingCo</span> 
    <h3><a href="/en/mobile-vikings/news/new-website-same-spirit/">New website, same spirit</a></h3> 
    </div> 
</article>

Они применяют переход к .item, который будет анимировать все свойства CSS:

.pulse .item-holder .item { 
    float: left; 
    width: 100%; 
    height: 100%; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    -webkit-background-size: cover; 
    background-size: cover; 
    background-position: center center; 
    position: relative; 
    -moz-transition: all 150ms ease-in; 
    -o-transition: all 150ms ease-in; 
    -webkit-transition: all 150ms ease-in; 
    transition: all 150ms ease-in; 
    -moz-transform: scale3d(1,1,1); 
    -ms-transform: scale3d(1,1,1); 
    -webkit-transform: scale3d(1,1,1); 
    transform: scale3d(1,1,1); 
    filter: alpha(Opacity=80); 
    opacity: .8; 
}

и это :hover псевдо-класс определяет масштабирование преобразования, который анимированное указанным выше переход:

.pulse .item-holder:hover .item { 
    -moz-transform: scale3d(1.1,1.1,1); 
    -ms-transform: scale3d(1.1,1.1,1); 
    -webkit-transform: scale3d(1.1,1.1,1); 
    transform: scale3d(1.1,1.1,1); 
    filter: alpha(enabled=false); 
    opacity: 1; 
}

Все это требует упаковки в контейнере, который определяет стиль overflow:hidden.

Это кажется достаточно разумным, поэтому вы можете использовать его в качестве основы для своего собственного кода. Вот скрипку, показывая его работы с изображением:

http://jsfiddle.net/q32stv45/1/

источник

2015-04-24 13:06:19 sifriday

Как преобразовать изображение при зависании

ответ

Смежные вопросы