JSFiddle - React, Tailwind, and code Playground

by Softlink

HTML

<div class="wrap">
        <h1>Слайдер на :hover</h1>
        <div class="slider">
                <div class="parents one">первый пункт</div>
                <div class="parent-hidden">
                        <div class="parents two">второй пункт
                            <div class="child two-slide">
                                <img src="http://alpatriott.ru/works/slider/images/2.jpg" alt="">
                                <div class="child-content">
                                    Газон является одним из главных элементов формирования ландшафта. 
                                    Он подчеркивает красоту сада, создаёт притягательный фон для посадок 
                                    растений и архитектурных сооружений. Газон имеет не только декоративное, 
                                    но и санитарно-гигиеническое значение: задерживает пыль, очищает воздух, 
                                    снижает температуру, повышает влажность.
                                </div>
                            </div>
                        </div>
                        <div class="parents three">третий пункт
                            <div class="child three-slide">
                                <img src="http://alpatriott.ru/works/slider/images/3.jpg" alt="">
                                <div class="child-content">
                                    Среди горных хребтов, в долинах, котловинах и даже у гребней в циркообразных 
                                    углублениях скрывается много озер. Некоторые типы озер особенно характерны для гор. 
                                    Наиболее крупные озера располагаются в котловинах тектонического происхождения. 
                                    Широко распространены завально-запрудные, подпруженные моренами, ледниковые и каровые озера. 
                                </div>
                            </div>
                        </div>    
                </div>
                <div...

CSS

html, body{
margin:0;
padding:0;
height:100%;
background:#222;
font-family:Tahoma;
}

h1{
text-align:center;
font-size:26px;
color:#888;
font-family:Georgia;
font-weight:normal;
}

img{
display:block;
}

a{
display:block;
text-decoration:none;
}

a:focus{
outline:none;
}

.wrap {
width:990px;
margin:0 auto;
padding:0px 0px 50px 0px;
}


.slider{
width:670px;
overflow:hidden;
margin:0 auto;
position:relative;
}

.parents{
position:relative;
left:481px;    
height:100px;
width:190px;
background: #444444;
background: -moz-linear-gradient(top,  #444444 0%, #6f6f6f 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#444444), color-stop(100%,#6f6f6f));
background: -webkit-linear-gradient(top,  #444444 0%,#6f6f6f 100%);
background: -o-linear-gradient(top,  #444444 0%,#6f6f6f 100%);
background: -ms-linear-gradient(top,  #444444 0%,#6f6f6f 100%);
background: linear-gradient(top,  #444444 0%,#6f6f6f 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#444444', endColorstr='#6f6f6f',GradientType=0 );
border-right:1px solid #222;
box-sizing:border-box;
line-height:100px;
text-align:center;
color:#222;
font-size:22px;
-webkit-transition-property:text-shadow, box-shadow;
-webkit-transition-duration:0.3s;
-moz-transition-property:text-shadow;
-moz-transition-duration:0.5s;
-o-transition-property:text-shadow;
-o-transition-duration:0.5s;
transition-property:text-shadow;
transition-duration:0.5s;
}

.parents:hover{
background: #444;
box-shadow:inset 0px 0px 35px 3px #222;
text-shadow:0px 1px 1px #888;
}

.parents:focus{
background: #444;
box-shadow:inset 0px 0px 35px 3px #222;
text-shadow:0px 1px 1px #888;
}

.child{
position:absolute;
right:190px;
top:0px;
width:480px;
height:300px;
background:#777;
text-shadow:none;
z-index:1;
}


.two-slide{
opacity:0;
top:-100px;
}

.three-slide{
opacity:0;
top:-200px;
}

.one-slide, .two-slide, .three-slide{
-webkit-transition-property:opacity,...