<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <section class="banner"> <div id="carousel-example-generic" class="carousel slide" data-ride="carousel"> <!-- Indicators --> <ol class="left carousel-indicators"> <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li> <li data-target="#carousel-example-generic" data-slide-to="1"></li> <li data-target="#carousel-example-generic" data-slide-to="2"></li> <li data-target="#carousel-example-generic" data-slide-to="3"></li> <li data-target="#carousel-example-generic" data-slide-to="4"></li> <li data-target="#carousel-example-generic" data-slide-to="5"></li> </ol> <!-- Wrapper for slides --> <div class="carousel-inner"> <div class="item active"> <div class="slider_image"> <img src="images/graphics.jpg" alt="graphics_Design" style="width:100%;"> <div class="text_slider"> <h1>Best It Hubs</h1> <p>Lorem Ipsum is simply dummy text of the<br> printing and typesetting industry.</p> <a href="index.html"><button type="submit" class="login"><span>Read More</span></button></a> </div><!--bc--> </div><!--ab--> </div><!--item--> <div class="item"> <div class="slider_image"> <img src="images/webdesign.jpg" alt="graphics_Design" style="width:100%;"> <div class="text_slider"> <h1>What is Lorem Ipsum?</h1> <p>Lorem Ipsum is simply dummy text of the<br> printing and typesetting industry.</p> <a href="index.html"><button type="submit" class="login"><span>Read More</span></button></a> </div><!--bc--> </div><!--ab--> </div><!--item--> <div class="item"> <div class="slider_image"> <img src="images/webdevelopment.jpg" alt="graphics_Design" style="width:100%;"> <div class="text_slider"> <h1>What is Lorem Ipsum?</h1> <p>Lorem Ipsum is simply dummy text of the<br> printing and typesetting industry.</p> <a href="index.html"><button type="submit" class="login"><span>Read More</span></button></a> </div><!--bc--> </div><!--ab--> </div><!--item--> <div class="item"> <div class="slider_image"> <img src="images/appdevelopment.jpg" alt="graphics_Design" style="width:100%;"> <div class="text_slider"> <h1>What is Lorem Ipsum?</h1> <p>Lorem Ipsum is simply dummy text of the<br> printing and typesetting industry.</p> <a href="index.html"><button type="submit" class="login"><span>Read More</span></button></a> </div><!--bc--> </div><!--ab--> </div><!--item--> <div class="item"> <div class="slider_image"> <img src="images/marketing.jpg" alt="graphics_Design" style="width:100%;"> <div class="text_slider"> <h1>What is Lorem Ipsum?</h1> <p>Lorem Ipsum is simply dummy text of the<br> printing and typesetting industry.</p> <a href="index.html"><button type="submit" class="login"><span>Read More</span></button></a> </div><!--bc--> </div><!--ab--> </div><!--item--> <div class="item"> <div class="slider_image"> <img src="images/seo.jpg" alt="graphics_Design" style="width:100%;"> <div class="text_slider"> <h1>What is Lorem Ipsum?</h1> <p>Lorem Ipsum is simply dummy text of the<br> printing and typesetting industry.</p> <a href="index.html"><button type="submit" class="login"><span>Read More</span></button></a> </div><!--bc--> </div><!--ab--> </div><!--item--> </div><!--carousel-inner--> <!-- Controls --> <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left"></span> </a> <a class="right carousel-control" href="#carousel-example-generic" data-slide="next"> <span class="glyphicon glyphicon-chevron-right"></span> </a> </div><!--carousel--> </section> <!--end banner-->

/*start banner*/ .slider_image img{ width: 100%; } .slider_image{ position: relative; } .text_slider{ position: absolute; z-index: 1; top: 200px; left: 100px; } .text_slider h1{ font-size: 40PX; font-weight: bolder; color: #fff; } .text_slider p{ font-size: 18px; color: #fff; font-family: 'Lobster', cursive; margin-bottom: 20px; } .login{ background-color: rgba(0,0,0,0.8); color: #fff; padding: 6px 40px; border: none; position: relative; font-weight: bold; } .login:hover{ background-color: rgba(255,143,0,0.3); color: rgba(0,0,0,0.8); -webkit-transition: background 1.5s; /* Safari */ transition: background 1.5s; } .login::after,.login::before{ content:""; width: 0; height: 2px; position: absolute; transition: all 0.1s linear; background: #ff8f00; transition-duration: 1s; } .login::after{ top: 0; left: 0; transition-delay: 0.1s; } .login::before{ bottom: 0; right: 0; transition-delay: 0.3s; } .login:hover::after,.login:hover::before{ width: 100%; } .login span::after,.login span::before{ content:""; height: 0; width: 2px; position: absolute; transition: all 0.2s linear; background: #ff8f00; top: 0; transition-duration: 1s; } .login span::after{ left: 0; top: 0; transition-delay: 0.4s; } .login span::before{ right: 0; bottom: 0; transition-delay: 0.2s; } .login:hover span::after,.login:hover span::before{ height: 100%; } /*end banner*/