xxxxxxxxxx
//slide down
.btn:checked ~ .box {
clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
}
.box {
width: 350px;
margin-top: 2em;
position: absolute;
overflow: hidden;
border: 1px solid rgba(0, 0, 0, 0.137);
transition: all 0.4s;
clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
box-shadow: 0px 2rem 10px black;
}
xxxxxxxxxx
.img-container{
width: 60%;
height: 70vh;
background-color: rgb(250, 250, 2);
position: relative;
}
/* image slides start */
.img-container figcaption{
position: absolute;
top: 50px;
padding-left: 60px;
}
#img-one{
width: 100%;
height: 70vh;
position: absolute;
}
#img-two{
width: 100%;
height: 70vh;
position: absolute;
}
#img-three{
width: 100%;
height: 70vh;
position: absolute;
}
/* image slides end */
xxxxxxxxxx
<div class="slider">
<div class="slide">
<img src="image1.jpg" alt="Image 1">
</div>
<div class="slide">
<img src="image2.jpg" alt="Image 2">
</div>
<div class="slide">
<img src="image3.jpg" alt="Image 3">
</div>
</div>
xxxxxxxxxx
.slick-list,.slick-slider,.slick-track{position:relative;display:block}.slick-loading .slick-slide,.slick-loading .slick-track{visibility:hidden}.slick-slider{-moz-box-sizing:border-box;box-sizing:border-box;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-touch-callout:none;-khtml-user-select:none;-ms-touch-action:pan-y;touch-action:pan-y;-webkit-tap-highlight-color:transparent}.slick-list{overflow:hidden;margin:0;padding:0}.slick-list:focus{outline:0}.slick-list.dragging{cursor:pointer;cursor:hand}.slick-slider .slick-list,.slick-slider .slick-track{-webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0);-o-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}.slick-track{top:0;left:0}.slick-track:after,.slick-track:before{display:table;content:''}.slick-track:after{clear:both}.slick-slide{display:none;float:left;height:100%;min-height:1px}[dir=rtl] .slick-slide{float:right}.slick-slide img{display:block}.slick-slide.slick-loading img{display:none}.slick-slide.dragging img{pointer-events:none}.slick-initialized .slick-slide{display:block}.slick-vertical .slick-slide{display:block;height:auto;border:1px solid transparent}.slick-arrow.slick-hidden{display:none}
xxxxxxxxxx
<!-- Start CSS Slideshow BODY section -->
<div id="wowslider-container1">
<div class="ws_images"><ul>
<li><img src="data1/images/hongkong1081704.jpg" alt="Hong Kong" title="Hong Kong" id="wows1_0"/></li>
<li><img src="data1/images/london830775.jpg" alt="London" title="London" id="wows1_1"/></li>
<li><img src="data1/images/new_york.jpg" alt="New York" title="New York" id="wows1_2"/></li>
<li><img src="data1/images/shanghai.jpg" alt="Shanghai" title="Shanghai" id="wows1_3"/></li>
</ul></div>
<div class="ws_bullets"><div>
<a href="#" title="Hong Kong"><span><img src="data1/tooltips/hongkong1081704.jpg" alt="Hong Kong"/>1</span></a>
<a href="#" title="London"><span><img src="data1/tooltips/london830775.jpg" alt="London"/>2</span></a>
<a href="#" title="New York"><span><img src="data1/tooltips/new_york.jpg" alt="New York"/>3</span></a>
<a href="#" title="Shanghai"><span><img src="data1/tooltips/shanghai.jpg" alt="Shanghai"/>4</span></a>
</div></div>
<div class="ws_shadow"></div>
</div>
<script type="text/javascript" src="engine1/wowslider.js"></script>
<script type="text/javascript" src="engine1/script.js"></script>
<!-- End CSS Slider BODY section -->