0

У меня 3 дива, у них фон, надо сделать так чтобы див при наведении не увеличивался а фон в нем увеличивался. http://sitehero.us/

.img-wr {
    text-align: center;
}
.img-wr1,
.img-wr2,
.img-wr3 {
    display: inline-block;
    width: 32%;
    height: 240px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    overflow: hidden;
}
.img-wr1 {
    background-image: url("http://sitehero.us/image/catalog/banerside1.png");
}
.img-wr2 {
    background-image: url("http://sitehero.us/image/catalog/bannermiddle.png");
}
.img-wr3 {
    background-image: url("http://sitehero.us/image/catalog/banner31.png");
}

введите сюда описание изображения

3
  • 2
    Никак вы этого не сделаете, пока не разделите фон и текст на нем
    – Cheg
    22 сен 2017 в 14:31
  • Возможный дубликат вопроса: Названия эффектов?
    – Air
    22 сен 2017 в 16:00
  • 1
    пожалуйста, тоже самое и все работает shop-mining.com
    – Alex2222
    22 сен 2017 в 16:03

2 ответа 2

1

Попробуйте использовать псевдокласс :hover и свойство background-size:

.img-wr1:hover { /*то же самое для wr2 и wr3*/
    background-size: 150%;
}

Только с текстом что-то нужно сделать, а то он вшит в фон и вместе с ним увеличивается, чего, я так понимаю, не надо.

3
  • Все это я делал, это очевидно. суть в "див при наведении не увеличивался а фон в нем увеличивался"
    – Alex2222
    22 сен 2017 в 14:29
  • @Alex2222 А в моём варианте разве не так?
    – Byulent
    22 сен 2017 в 14:32
  • 1
    Забыл сказать, почему мне не понравилось, я это первым делом сделал, только увеличение происходит моментально, а транситион не работает
    – Alex2222
    22 сен 2017 в 15:48
1

Это осуществляется при помощи transform: scale(1.2); на дочернем элементе (у которого есть бэкграунд). Здесь есть подробная инструкция.

5
  • Только надо в данном диве создать ещё один див с этим самым фоном
    – Byulent
    22 сен 2017 в 14:33
  • @Byulent, всё верно. В статье это описано.
    – nikitar
    22 сен 2017 в 14:38
  • 1
    @Alex2222, да, будет контейнер, который будет отлавливать hover или focus события и будет дочерний элемент внутри него, который будет по этим событиям увеличиваться, но то, что вылезет за рамки родителя, скрыто overflow`ом.
    – nikitar
    22 сен 2017 в 14:39
  • но там высота и ширина у контейнера, я могу ее не задавать? мне же адаптировать надо это дело
    – Alex2222
    22 сен 2017 в 15:00
  • Какой толк если оно не адаптивно...
    – Alex2222
    22 сен 2017 в 15:45

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.