Как реализовать эффект на CSS

59

Abrikosik

16 ноября 2013, 17:22

609

Добрый вечер! Понравился эффект на сайте http://www.designscene.net/2013/11/bulgari-windows.html, в верху 4 картинки при наведении картинка увеличивается (налитает) и меняется на белый фон, на котором появляется название материала и кнопочка читать дальше при отведении курсора картинка возвращается, подскажите как реализовать с помощью CSS?

10

maggotinaff

16 ноября 2013, 17:42

#1

CSS код из примера, отвечающий за эту анимацию


.featured img {

    display: block;

    position: relative;

    transform: scaleY(1);

    transition: all 0.7s ease-in-out 0s;

}

.featured .overlay {

    background-color: rgba(219, 217, 220, 0.3);

    opacity: 0;

    transition: all 0.5s linear 0s;

}

.featured:hover img {

    opacity: 0;

    transform: scale(10);

}

.featured:hover .overlay {

    opacity: 1;

}

1

стабильный доход (http://fx-trend.com/landing/pamm1?agent=502515) уже 2+ года

A

59

Abrikosik

16 ноября 2013, 20:28

#2

maggotinaff:
CSS код из примера, отвечающий за эту анимацию


.featured img {

    display: block;

    position: relative;

    transform: scaleY(1);

    transition: all 0.7s ease-in-out 0s;

}

.featured .overlay {

    background-color: rgba(219, 217, 220, 0.3);

    opacity: 0;

    transition: all 0.5s linear 0s;

}

.featured:hover img {

    opacity: 0;

    transform: scale(10);

}

.featured:hover .overlay {

    opacity: 1;

}

Этот код делает красивую анимацию с превращением картинки в белый фон и затем в прозрачный фон, а как сделать "наезд" увеличение картинки?

10

maggotinaff

16 ноября 2013, 23:39

#3

За "наезд" отвечает этот кусок кода


.featured:hover img {

    opacity: 0;

    transform: scale(10);

}

а именно transform: scale(10);

A

59

Abrikosik

17 ноября 2013, 11:31

#4

maggotinaff:
За "наезд" отвечает этот кусок кода


.featured:hover img {
    opacity: 0;
    transform: scale(10);
}

а именно transform: scale(10);

Да так и есть только надо было указывать под каждый браузер -webkit-transform: и так далее, а то не понимает =)

Дзен реализовал для авторов возможность вывода денег через СПБ

Как снизить ДРР до 4,38% и повысить продажи с помощью VK Рекламы