<!-- 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 -->//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; }//https://www.w3schools.com/howto/howto_js_slideshow.asp <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>.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}