Наткнулся в своём архиве на исходники «медальки».
Потребовалось как-то установить значок на сайт.
Фон значка обесцвечивался в Paint.NET (Да. Я тот ещё извращенец).
В размерах 48x48 он оказался нечитаем и было решено при наведении курсора мыши увеличивать значок до оригинальных размеров.
Казалось бы одну картинку повесить — 2 строчки кода, а ушло на это дело около 2-х вечеров.
Opera поняла меня сразу. 10 минут со ввода первого символа и результат выводился как задумывалось.
FireFox’у и Chrome’у пришлось объяснять что от них требуется ещё около 40 минут,
а от Internet Explorer’а добиться желаемого так и не удалось. Как-то выводится (не без костылей, конечно) уже хорошо.
Это я к чему?
Сколько раньше приходилось потратить времени и сил чтобы страница открывалась если не у всех, то хотя бы у подавляющего большинства одинаково. А сейчас что?
После того, как Google потопили Opera’у и Internet Explorer некоторые сервисы даже на современных обозревателях не всегда работают (камень в огород корзины DNS-Shop.RU).
Но мы ушли далеко от темы. Собственно код таблицы стилей:
.MedalLogo{
margin-top: 10px;
clear: both;
width: 42px;
height: 42px;
border: 3px solid white;
background: url("GEMMA_48.png") no-repeat center white;
border-radius: 24px;
box-shadow: .1em .1em .5em .2em rgba(0,0,0,.2);
}
.MedalLogo:hover{
z-index: 11;
position:fixed;
width: 200px;
height: 200px;
padding: .5em;
margin-left: -80px;
/*background: url("GEMMA_200w.png") no-repeat center white rgba(255,255,255,.6);*/
background: no-repeat center rgba(255,255,255,.6);
background-image: url("GEMMA_200w.png");
border-radius: 50%;
box-shadow: .1em .1em .5em .2em rgba(0,0,0,.5);
}и код HTML-вставки:
<img class="MedalLogo" src="1px.png">Результат:
А так это выглядело на своём законном месте:
http://web.archive.org/web/20151230105339/http://www.dreamkam.ru/