Код:
<style> .ABCV{/*блок целиком*/ width:500px; /*ширина*/ margin:auto; /*отступы автоматические*/ line-height:16px; /*высота линий*/ } #LTRSV {/*Буквы блок полностью*/ width:500px; /*ширина*/ height:35px; /*высота*/ margin-bottom:25px; /*отступ снизу*/ text-align:center; /*текст по центру*/ transition:all linear 0.45s; -webkit-transition:all linear 0.45s; /*анимация*/ } #LTRSV:hover {/*Наведение на буквы*/ height:160px; /*высота появляющегося контейнера*/ color:white; /*цвет шрифта*/ } #LTRSV span{/*чёрная полоса*/ display:block; margin-top:-25px; /*отступ сверху*/ height:5px; /*высота линии*/ background:black; /*цвет линии*/ } .LTRSV {/*круглые области на фоне букв*/ transition:all ease 0.35s; -webkit-transition:all ease 0.35s; /*анимация*/ position:relative; /*позиционирование*/ z-index:3; display:inline-block; vertical-align:top; /*вертикальное выравнивание*/ margin:0 15px; /*отступы*/ height:33px; /*высота*/ width:35px; /*ширина*/ padding:12px 5px 0px 5px; /*отступы*/ border-radius:35px; /*закругление краём*/ text-align:center; /*по центру*/ color:white; /*цвет шрифта*/ background:teal; /*фоновый цвет*/ } .LTRSV div {/*контейнер при наведении на буквы - настройки*/ position:absolute; /*позиционирование*/ z-index:1; margin-left:-45px; /*отступ слева*/ margin-top:25px; /*отступ сверху*/ width:500px; /*ширина*/ height:0; /*высота ноль - то есть его не видно*/ overflow:hidden; background:rgba(250,250,250,0.3); /*цвет фона*/ color:black; /*цвет шрифта*/ text-align:left; /*текст слева*/ font-size:11px; /*размер шрифта*/ transition:all linear 0.45s; -webkit-transition:all linear 0.45s; /*анимация*/ } .LTRSV:hover div{/*контейнер при наведении на буквы - появляется*/ width:500px; /*ширина*/ height:135px; /*высота*/ } .LTRSV p {/*блок с текстом в сером конейнере*/ width:490px; /*ширина*/ height:125px; /*высота*/ padding:5px; /*отступ по всем четырём краям*/ overflow:auto; transform:translateY(-125px); -webkit-transform:translateY(-125px); /*анимация*/ transition:all linear 0.45s; -webkit-transition:all linear 0.45s; /*анимация*/ } .LTRSV:hover p{/*блок с текстом в сером конейнере при наведении мышью на буквы*/ transform:translateY(0px); -webkit-transform:translateY(0px); /*анимация*/ } .VII div{/*двигаем второй круг с буквами*/ position:absolute; /*позиционирование*/ margin-left:-120px; /*отступ слева*/ } .VIII div{ /* двигаем 3й круг с буквами */ position:absolute; /*позиционирование*/ margin-left:-195px; /*отступ слева*/ } .VIV div{ /* двигаем 4й круг с буквами */ position:absolute; /*позиционирование*/ margin-left:-270px; /*отступ слева*/ } .VV div{ /* двигаем 5й круг с буквами */ position:absolute; /*позиционирование*/ margin-left:-345px; /*отступ слева*/ } .VVI div{/* двигаем 6й круг с буквами */ position:absolute; /*позиционирование*/ margin-left:-420px; /*отступ слева*/ } .STUV {/*Блок с буквами S T U*/ font-size:12px; /*размер шрифта*/ height:32px; /*высота*/ width:35px; /*ширина*/ padding:13px 5px 0px 5px; /*отступы*/ } .STUV div{ /* двигаем Блок с буквами S T U */ position:absolute; /*позиционирование*/ margin-left:-270px;/*отступ слева*/ } .XYZV {/*Блок с буквами XYZ*/ font-size:12px; /*размер шрифта*/ height:32px; /*высота*/ width:35px; /*ширина*/ padding:13px 5px 0px 5px; /*отступы*/ } .XYZV div{/* двигаем Блок с буквами XYZ */ position:absolute; /*позиционирование*/ margin-left:-420px; /*отступ слева*/ } <style>