Изменил верстку... на более адекватную наверно... Но вот с фоном так и не могу разобраться. Что не так
CODE (html):
скопировать код в буфер обмена
скопировать код в буфер обмена
- <style>
- .slide-container {
- display: flex;
- background-color: #fff;
- min-height: 100px;
- padding: 59px 100px;
- }
- .gray {
- background-color: #EBEBEB;
- }
- .blue {
- background-color: #00AEEF;
- color: #fff;
- }
- .s-name {
- margin-left: 10px;
- width: 58px;
- max-height: 58px;
- line-height: 58px;
- text-align: center;
- }
- .icon {
- position: absolute;
- z-index: 3;
- cursor: pointer;
- width: 58px;
- max-height: 58px;
- transition: all .25s ease;
- }
- .s-content {
- position: relative;
- top: 0;
- width: 100%;
- transform: rotate(90deg);
- white-space: nowrap;
- z-index: -1;
- opacity: 0;
- transition: all 1s ease;
- }
- .icon:hover {
- max-height: 100%;
- }
- .s-name:hover .s-content {
- opacity: 1;
- top: 58px;
- z-index: 2;
- }
- </style>
- <div class="slide-container">
- <div class="s-name">
- <div class="icon gray">1</div>
- <div class="s-content gray">Slide 1 contents</div>
- </div>
- <div class="s-name">
- <div class="icon gray">2</div>
- <div class="s-content gray">Slide 2 contents</div>
- </div>
- <div class="s-name">
- <div class="icon gray">3</div>
- <div class="s-content gray">Slide 3 contents</div>
- </div>
- <div class="s-name">
- <div class="icon blue">4</div>
- <div class="s-content blue">Slide 4 contents</div>
- </div>
- </div>