<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/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 ----------> <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container dad" style="width: 100%; padding: 0;"> <div class="row" style="float: right;"> <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12"> <div class="grow vertical-tab-1"> <p class="tab-title"></p> <p class="rotate">Home </p> </div> <div class="grow vertical-tab-2"> <p class="tab-title"></p> <p class="rotate">Add</p> </div> <div class="grow vertical-tab-3"> <p class="tab-title"></p> <p class="rotate">Review</p> </div> </div> </div> </div>

@import url(https://fonts.googleapis.com/css?family=Josefin+Sans:400,100,300,600,700); .dad { /* tas pagrindinis*/ background: url('https://static-communitytable.parade.com/wp-content/uploads/2014/03/rethink-target-heart-rate-number-ftr.jpg') fixed; } .grow { padding: 5px 5px 5px 5px; height: 100vh; width: 20vh; float: left; position: relative; transition: width 0.5s; -webkit-transition: width 0.5s; text-align: left; overflow: hidden; } .grow:hover { height: 100vh; width: 50vh; text-align: left; } .tab-title { font-size: 2.5em; color: #fcfcfc; text-transform: uppercase; font-family: 'Josefin Sans', sans-serif; font-weight: 400; } .vertical-tab-1 { background: url('https://static-communitytable.parade.com/wp-content/uploads/2014/03/rethink-target-heart-rate-number-ftr.jpg') fixed; } .vertical-tab-2 { background: url("https://image.ibb.co/i7g5Hn/web_N_Private_health_insurance_complaints.jpg") center center; } .vertical-tab-3 { background: url("https://image.ibb.co/kORpcn/heart_rate_plots_causes.jpg") center center; } .rotate { transform: rotate(-90deg); -webkit-transform: rotate(-90deg); margin-top: 50vh; font-family: 'Josefin Sans', sans-serif; font-weight: 400; color: #000; font-size: 2.25em; text-transform: uppercase; } @media screen and (max-width: 970px) { .rotate { font-size: 1.5em; } } @media screen and (max-width: 970px) { .tab-title { font-size: 1.6em; } } @media screen and (max-width: 767px) { .rotate { font-size: 1.125em; } } @media screen and (max-width: 767px) { .tab-title { font-size: 1.25em; } } @media screen and (max-width: 500px) { .rotate { font-size: 0.6em; } } @media screen and (max-width: 500px) { .tab-title { font-size: 0.75em; } }