В следующем теге привязки есть ребенок и внук. У внука есть дальний фоновой градиент. Ребенок на ближнем фоне прозрачен, но имеет переход к градиенту. При наведении непрозрачность ребенка переходит от 0 до 1 в течение 1 секунды.
Вот CSS:
.bkgrndfar {
position:absolute;
top:0;
left:0;
z-index:-2;
height:100%;
width:100%;
background:linear-gradient(#eee, #aaa);
}
.bkgrndnear {
position:absolute;
top:0;
left:0;
height:100%;
width:100%;
background:radial-gradient(at 50% 50%, blue 1%, aqua 100%);
opacity:0;
transition: opacity 1s;
}
a.menulnk {
position:relative;
text-decoration:none;
color:#333;
padding: 0 20px;
text-align:center;
line-height:27px;
float:left;
}
a.menulnk:hover {
color:#eee;
text-decoration:underline;
}
/* This transitions child opacity on parent hover */
a.menulnk:hover .bkgrndnear {
opacity:1;
}
И это HTML:
<a href="#" class="menulnk">Transgradient
<div class="bkgrndfar">
<div class="bkgrndnear">
</div>
</div>
</a>
Вышеупомянутая проверка протестирована только в последней версии Chrome. Это прежде, чем наведите указатель мыши на полпути на ползунках и полностью перевернутые наводящие изображения:
[/g0] [/g1] [/g2]