body,
html {
margin: 0;
padding: 0;
}
/* Slider Css Start */
.slider_mdiv {
width: 100%;
height: 600px;
float: left;
position: relative;
}
.rdo_slider{
display: block;
}
.slider_img {
position: absolute;
width: 100%;
height: 100%;
z-index: -1;
}
.slider_img img {
width: 100%;
object-fit: cover;
height: 600px;
}
.slider_prev, .slider_next{
position: absolute;
top: 40%;
background-color: #555;
cursor: pointer;
width: 40px;
height: 55px;
line-height: 60px;
text-align: center;
transition: all 0.2s;
opacity: .5;
}
.slider_prev:hover, .slider_next:hover{
background-color: black;
opacity: 1;
}
.slider_prev i{
font-size: 22px;
color: #fff;
margin-right: 10px;
}
.slider_next i{
font-size: 22px;
color: #fff;
margin-left: 10px;
}
.slider_prev{
left: 0;
border-radius: 0 50% 50% 0;
}
.slider_next{
right: 0;
border-radius: 50% 0 0 50%;
}
.slider_nav {
position: absolute;
bottom: 20px;
text-align: center;
width: 100%;
z-index: 5;
}
.slider_nav label {
width: 15px;
height: 15px;
background-color: rgba(0, 0, 0, 0.5);
border-radius: 50%;
display: inline-block;
cursor: pointer;
margin: 0 5px;
transition: all 0.7s;
}
#rdo_slider_1:checked~#slider_nav #slider_dot_1,
#rdo_slider_2:checked~#slider_nav #slider_dot_2,
#rdo_slider_3:checked~#slider_nav #slider_dot_3,
#rdo_slider_4:checked~#slider_nav #slider_dot_4
{
background-color: #fff !important;
}
#rdo_slider_1:checked~#slider_div_1,
#rdo_slider_2:checked~#slider_div_2,
#rdo_slider_3:checked~#slider_div_3,
#rdo_slider_4:checked~#slider_div_4
{
z-index: 1;
animation: scroll 0.7s ease-in-out;
}
@keyframes scroll{
0%{
opacity: 0.5;
}
100%{
opacity: 1;
}
}
/* Slider Css End */
.black_div{
background-color: hsla(0, 0%, 0%, 0.6);
width: 100%;
position: relative;
z-index: 1;
top: 50%;
padding: 20px;
color: #fff;
font-family: calibri;
font-size: 20px;
box-sizing: border-box;
float: left;
position: relative;
}
.black_div_1{
width: 33.33%;
float: left;
text-align: left;
}
.black_div_2{
width: 33.33%;
float: left;
position: relative;
}
.black_div_3{
width: 33.33%;
float: left;
text-align: right;
}
.monitor_div{
width: 300px;
height: 235px;
float: left;
background-image: url(https://www.stickpng.com/assets/images/580b57fbd9996e24bc43bfe6.png);
background-size: 100% 100%;
position: absolute;
transform: translate(-50%, -50%);
left: 50%;
}
/* slider_monitor start */
.slider_monitor{
position: relative;
}
.slider_img_m{
position: absolute;
z-index: 0;
}
.slider_img_m img{
width: 300px;
height: 185px;
padding: 10px;
box-sizing: border-box;
}
#rdo_slider_1:checked~#slider_monitor #monitor_div_1,
#rdo_slider_2:checked~#slider_monitor #monitor_div_2,
#rdo_slider_3:checked~#slider_monitor #monitor_div_3
{
z-index: 999999;
background-color:red;
animation: scroll 0.7s ease-in-out;
}
/* slider_monitor end */
</style></pre><pre>
<body id="bodys"><div class="slider_mdiv"><input type="radio" class="rdo_slider" name="slider_no" id="rdo_slider_1" checked /><input type="radio" class="rdo_slider" name="slider_no" id="rdo_slider_2" /><input type="radio" class="rdo_slider" name="slider_no" id="rdo_slider_3" /><input type="radio" class="rdo_slider" name="slider_no" id="rdo_slider_4" /><div class="slider_img" id="slider_div_1"><img src="https://cdn.pixabay.com/photo/2020/03/01/15/30/fox-4893199_960_720.jpg" /><label for="rdo_slider_4" class="slider_prev"><i class="fa fa-chevron-left" aria-hidden="true"></i></label><label for="rdo_slider_2" class="slider_next"><i class="fa fa-chevron-right" aria-hidden="true"></i></label></div><div class="slider_img" id="slider_div_2"><img src="https://cdn.pixabay.com/photo/2020/03/02/14/54/landscape-4895932_960_720.jpg" /><label for="rdo_slider_1" class="slider_prev"><i class="fa fa-chevron-left" aria-hidden="true"></i></label><label for="rdo_slider_3" class="slider_next"><i class="fa fa-chevron-right" aria-hidden="true"></i></label></div><div class="slider_img" id="slider_div_3"><img src="https://cdn.pixabay.com/photo/2020/03/01/18/05/owl-4893714_960_720.jpg" /><label for="rdo_slider_2" class="slider_prev"><i class="fa fa-chevron-left" aria-hidden="true"></i></label><label for="rdo_slider_4" class="slider_next"><i class="fa fa-chevron-right" aria-hidden="true"></i></label></div><div class="slider_img" id="slider_div_4"><img src="https://cdn.pixabay.com/photo/2020/03/01/19/50/sheep-4893935_960_720.jpg" /><label for="rdo_slider_3" class="slider_prev"><i class="fa fa-chevron-left" aria-hidden="true"></i></label><label for="rdo_slider_1" class="slider_next"><i class="fa fa-chevron-right" aria-hidden="true"></i></label></div><div class="slider_nav" id="slider_nav"><label for="rdo_slider_1" id="slider_dot_1"> </label><label for="rdo_slider_2" id="slider_dot_2"> </label><label for="rdo_slider_3" id="slider_dot_3"> </label><label for="rdo_slider_4" id="slider_dot_4"> </label></div><div class="black_div"><div class="black_div_1">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Commodi, dolorem?</div><div class="black_div_2"> <!-- Monitor Slider Start --><div class="monitor_div"><div class="slider_monitor" id="slider_monitor"><div class="slider_img_m" id="monitor_div_1"><img src="https://cdn.pixabay.com/photo/2020/03/01/15/30/fox-4893199_960_720.jpg" /></div><div class="slider_img_m" id="monitor_div_2"><img src="https://cdn.pixabay.com/photo/2020/03/02/14/54/landscape-4895932_960_720.jpg" /></div><div class="slider_img_m" id="monitor_div_3"><img src="https://dummyimage.com/300x200/262626/fff.jpg&text=Monitor+3" /></div><div class="slider_img_m" id="monitor_div_4"><img src="https://dummyimage.com/300x200/262626/fff.jpg&text=Monitor+4" /></div></div></div><!-- Monitor Slider End --></div><div class="black_div_3">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Commodi, dolorem?</div></div></div></body>
