Меняющаяся картинка в экстратопе/экстработтоме

[39546284]

В дневнике  |Иероним| в экстратопе реализован эффект смены картинки при наведении мыши. Выглядит это так:

В обычном состоянии:

После наведения мыши:

Но, есть несколько "НО"!

- 1 - в Firefox эффект атрибута «transition» работает чётко и безотказно: медленное затухание верхней картинки и постепенное проявление нижней. Т.е. так, как предполагается свойствами самого атрибута.
- 2 - в Chrome по не понятным причинам эффект атрибута «transition» работает иначе: верхняя картинка летает и разворачивается. И это тоже интересно. Вообще Chrome с CSS, как отмечают знатоки, не очень дружит. И разработчикам этого браузера не плохо было бы уделить этому вопросу немного больше внимания, имхо.

Есть 2 варианта решения:

1. Простой - без «transition», т.е. без плавной смены картинки, по сути - резкая, как бы скачкообразная смена. Так было в коде дневника  |Иероним| до вчерашнего вечера. Но, мы ведьмы эстеты! И простые воплощения не в нашем стиле.
2. Чуть более сложный с маленькими хитростями и своей загвоздкой, о которой тоже поведаю ниже.

Итак:

1 вариант:

Работает так, как поначалу у  |Иероним| в дневнике. Т.е. картинка сменяется на "ховерную" скачкообразно. Код выглядит так:

#extratop { position: relative; background: url('/userdir/3/1/2/6/3126319/78037382.png') no-repeat scroll 0 0 transparent ; background-position: top center; height: 441 min-width:1100 width:1100 background-size: auto 100%; margin: 0px 0 0 0; background-color:rgba(0,0,0,0); }
  #extratop:hover {position: relative; background: url('/userdir/3/1/2/6/3126319/78053314.png') no-repeat !important; background-position: top center; background-size: auto 100%; top: 0 }

Где основное:

— в селекторе #extratop: «background-position: top center;» - позиционирует картинку в экстратопе по верхней границе (top), и по ширине - по центру,
— в селекторе #extratop:hover: прописывается другая картинка, для которой дополнительно указан атрибут «top: 0» , по-правде говоря, я его так на всякий случай вписала.
— высоты картинок должны быть одинаковыми, и в «height:» нужно прописывать их точное значение, иначе картинка будет "плясать".

2 вариант:

Сходите в дневник  |Иероним| и вам не придётся мысленно предствалять плавную динамику в смене картинок, или странный баг в Crome, на который тоже стоит посмотреть, поверьте, чтобы оценить разницу в работе одного и того же атрибута в разных браузерах.
А теперь упомянутая выше загвоздка, которая в глаза сразу не бросится, и на которую можно забить. Так вот, при сворачивании окна браузера в окно на средней кнопке вверху, нижняя картинка немного сместиться относительно верхней и станет видна какая-то её часть из-под верхней. Внизу экстратопа справа, как это видно на пикче:

После наведения мыши нижняя картинка смещается, т.к. для неё в коде прописано позиционирование по центру, а вот враппер так не может:

Может с враппером и можно разобраться, но, мне пока недосуг. Да и вам будет задачка. Не забудьте потом поделиться решением )
Если на секундочку или дольше предположить, что большинство пользователей сидят в развёрнутых во весь экран браузерах, то этот бок не вылезет и никто ничего не заметит. А если и заметит, то не придаст особого значения и не побежит злорадствовать и тыкать в якобы недоработку. А ведь он просто несведущ в том, что конфликт атрибутов в разных селекторах не позволяет устранить этот недостаток _нуникак_! Ну, мы улыбнёмся и простим его )
Это тот вариант, над которым пришлось поработать, т.к. до "лбом об стену" хотелось вписать в код атрибут «transition», чтобы смена картинки происходила без "скачка" и позиции всех блоков чётко совпадали. Короче, код:

 {___________ экстратоп NEW with transition ___________________________}
  #add_block1 {position: absolute; width: 100%; top: 0 height: 441 background: url('/userdir/3/1/2/6/3126319/78053314.png') no-repeat scroll 0 0 transparent !important; background-position: top center !important; content:" "; }
 #extratop {z-index: 90; position: relative; background: url('/userdir/3/1/2/6/3126319/78037382.png') no-repeat scroll 0 0 transparent ; background-position: center 0 height: 441 min-width:1100 width:1100 background-size: auto 100%; margin: 0px 0 0 0; background-color:rgba(0,0,0,0); opacity: 1; -webkit-transition: all 1.5s; -moz-transition: all 1.5s; -o-transition: all 1.5s; transition: all 1.5s; }
 #extratop:hover {z-index: 91; position: relative; background: url('/userdir/3/1/2/6/3126319/78037382.png') no-repeat !important; background-position: top center; background-size: auto 100%; top: 0 opacity: 0; }

Где:

— в #add_block1: прописывается картинка, которая будет под экстратопом, и будет проявляться после наведения мыши. «position: absolute» - обязателен, чтобы выровнять картинку относительно верхней границы браузера. В атрибуте «background-position» обязателен !important, иначе не заработает позиционирование. Высоты картинок во всех селекторах должны быть одинаковые. Ну а «content:" ";» - обязателен по синтаксису.
— в #extratop: добавлен «z-index: 90;» (чем больше, тем надёжнее), чтобы он накрывал add_block1, у которого по умолчанию z-index будет получаться больше, т.к. это добавочные 10 элементов в конце CSS-кода дайри-страниц. Дальше «min-width:1100 width:1100» - ширина самой картинки. Она у меня равна ширине самого враппера. В атрибуте «opacity: 1;» прописано, что картинка должна быть видна. А вот в ...
— ... в #extratop:hover: прописано, что она должна исчезнуть, раствориться в атрибуте «opacity: 0;» и открыть пикчу в add_block1.

В следующем посте будет самый большой пример.