"Category"
Bootstrap 4.1.1 Snippet by uaKalwin

<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 ----------> <!-- CDN JS --> <script src="//code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script> <!-- Bootstrap JS --> <script src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script> <script src="//stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script> <!-- Jasny Bootstrap and JS --> <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jasny-bootstrap/4.0.0/css/jasny-bootstrap.min.css"> <script src="//cdnjs.cloudflare.com/ajax/libs/jasny-bootstrap/4.0.0/js/jasny-bootstrap.min.js"></script> <!-- Bootstrap select JS --> <script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.2/js/bootstrap-select.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.5/js/i18n/defaults-ua_UA.js"></script> <!-- FontAwesome and JS --> <script type="text/javascript" src="https://use.fontawesome.com/releases/v5.7.2/js/all.js"></script> <!-- Bootstrap CSS --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <!-- Bootstrap select CSS --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.2/css/bootstrap-select.min.css"> <div class="container-fluid category-list-index w-100 p-0" style="background: rgba(255,255,255,1);"> <nav class="row"> <li class="col-6 col-xs-4 col-sm-4 col-md-3 col-lg-3 col-xl-3" style="background:url(https://ukrprokat.com.ua/image/cache/data-teplo-teplovizor-flir-i5-600x600.jpg);background-size: 90px; background-position: center 5px;background-repeat: no-repeat;"> <div style="background-image: url()" title="" alt="" class="img-fluid d-block"></div> <span>Тепловизионное обследование</span> <article>text</article> <a href="/">Перейти</a> </li> <li class="col-6 col-xs-4 col-sm-4 col-md-3 col-lg-3 col-xl-3" style="background:url(https://ukrprokat.com.ua/image/cache/data-lesa-shtyrevye-lesa14-600x600.jpg);background-size: 90px; background-position: center 5px;background-repeat: no-repeat;"> <div style="background-image: url(https://cdn.icon-icons.com/icons2/236/PNG/256/Dish_Pasta_Spaghetti_26373.png)" title="" alt="" class="img-fluid d-block"></div> <span>Леса строительные</span> <article>text</article> <a href="/">Перейти</a> </li> <li class="col-6 col-xs-4 col-sm-4 col-md-3 col-lg-3 col-xl-3"> <div style="background-image: url(https://cdn.icon-icons.com/icons2/236/PNG/256/Dish_Pasta_Spaghetti_26373.png)" title="" alt="" class="img-fluid d-block"></div> <span>Вышки туры</span> <article>text</article> <a href="/">Перейти</a> </li> <li class="col-6 col-xs-4 col-sm-4 col-md-3 col-lg-3 col-xl-3"> <div style="background-image: url(https://cdn.icon-icons.com/icons2/236/PNG/256/Dish_Pasta_Spaghetti_26373.png)" title="" alt="" class="img-fluid d-block"></div> <span>Лестницы</span> <article>text</article> <a href="/">Перейти</a> </li> <li class="col-6 col-xs-4 col-sm-4 col-md-3 col-lg-3 col-xl-3"> <span>Электроинструмент</span> <a href="/">Перейти</a> </li> <li class="col-6 col-xs-4 col-sm-4 col-md-3 col-lg-3 col-xl-3"> <span>Отбойные молотки</span> <a href="/">Перейти</a> </li> <li class="col-6 col-xs-4 col-sm-4 col-md-3 col-lg-3 col-xl-3"> <span>Шлифовальные машины</span> <a href="/">Перейти</a> </li> <li class="col-6 col-xs-4 col-sm-4 col-md-3 col-lg-3 col-xl-3"> <span>Дорожная техника</span> <a href="/">Перейти</a> </li> <li class="col-6 col-xs-4 col-sm-4 col-md-3 col-lg-3 col-xl-3"> <span>Электростанции</span> <a href="/">Перейти</a> </li> <li class="col-6 col-xs-4 col-sm-4 col-md-3 col-lg-3 col-xl-3"> <span>Компрессоры</span> <a href="/">Перейти</a> </li> <li class="col-6 col-xs-4 col-sm-4 col-md-3 col-lg-3 col-xl-3"> <span>Для бетонных работ</span> <a href="/">Перейти</a> </li> <li class="col-6 col-xs-4 col-sm-4 col-md-3 col-lg-3 col-xl-3"> <span>Сварочные аппараты</span> <a href="/">Перейти</a> </li> <li class="col-6 col-xs-4 col-sm-4 col-md-3 col-lg-3 col-xl-3"> <span>Для дома и сада</span> <a href="/">Перейти</a> </li> <li class="col-6 col-xs-4 col-sm-4 col-md-3 col-lg-3 col-xl-3"> <span>Оборудование для газонов</span> <a href="/">Перейти</a> </li> <li class="col-6 col-xs-4 col-sm-4 col-md-3 col-lg-3 col-xl-3"> <span>Измерительная техника</span> <a href="/">Перейти</a> </li> <li class="col-6 col-xs-4 col-sm-4 col-md-3 col-lg-3 col-xl-3"> <span>Сантехника, электрика</span> <a href="/">Перейти</a> </li> <li class="col-6 col-xs-4 col-sm-4 col-md-3 col-lg-3 col-xl-3"> <span>Нагреватели</span> <a href="/">Перейти</a> </li> <li class="col-6 col-xs-4 col-sm-4 col-md-3 col-lg-3 col-xl-3"> <span>Алмазное сверление</span> <a href="/">Перейти</a> </li> <li class="col-6 col-xs-4 col-sm-4 col-md-3 col-lg-3 col-xl-3"> <span>Клининговая техника</span> <a href="/">Перейти</a> </li> <li class="col-6 col-xs-4 col-sm-4 col-md-3 col-lg-3 col-xl-3"> <span>Мотоблоки, культиваторы</span> <a href="/">Перейти</a> </li> <li class="col-6 col-xs-4 col-sm-4 col-md-3 col-lg-3 col-xl-3"> <span>Кладоискательство</span> <a href="/">Перейти</a> </li> <li class="col-6 col-xs-4 col-sm-4 col-md-3 col-lg-3 col-xl-3"> <span>Грузоподъемная техника</span> <a href="/">Перейти</a> </li> <li class="col-6 col-xs-4 col-sm-4 col-md-3 col-lg-3 col-xl-3"> <span>Автоприцепы</span> <a href="/">Перейти</a> </li> <li class="col-6 col-xs-4 col-sm-4 col-md-3 col-lg-3 col-xl-3"> <span>Ручной инструмент</span> <a href="/">Перейти</a> </li> </nav> </div>
.category-list-index nav { margin: auto; padding: 0; list-style-type: none; } .category-list-index nav li { padding: 1em 0 1.3em 0; height: 8em; text-align: center; font-size: 1em; color: rgb(255,255,255); transition: 0.5s; -webkit-transition: 0.5s; -moz-transition: 0.5s; -o-transition: 0.5s; overflow-y: hidden; background-size: 10px; background-position: center; background-repeat: no-repeat; text-align: center; -webkit-box-shadow: inset 0px 0px 300px 200px rgba(255,255,255,0.3); -moz-box-shadow: inset 0px 0px 300px 200px rgba(255,255,255,0.3); box-shadow: inset 0px 0px 300px 200px rgba(255,255,255,0.3); } .category-list-index nav li:hover { padding: .5em 0 0 0; -webkit-box-shadow: inset 0px 0px 300px 200px rgba(254,159,56,1); -moz-box-shadow: inset 0px 0px 300px 200px rgba(254,159,56,1); box-shadow: inset 0px 0px 300px 200px rgba(254,159,56,1); } .category-list-index nav li div { width: 100%; background-size: 90px; background-position: center; background-repeat: no-repeat; max-width: 100% !important; height: 90px !important; margin: -15px 0px 0 !important; transition: 0.5s; -webkit-transition: 0.5s; -moz-transition: 0.5s; -o-transition: 0.5s; } .category-list-index nav li:hover div { height: 0 !important; margin-bottom: 1em !important; } .category-list-index nav li span { text-shadow: none; color: rgba(0,0,0,1); font-weight: bolder; } /* .category-list-index nav li:hover img { height: 0px !important; margin-top: -20px !important; transition: 0.5s; -webkit-transition: 0.5s; -moz-transition: 0.5s; -o-transition: 0.5s; } */ .category-list-index nav li:hover span { color: rgba(255,255,255,1); padding-bottom: .5em; margin-top: 3em; border-bottom: 1px solid rgb(255,255,255); text-shadow: 1px 1px 2px black; } .category-list-index nav li article { display: none; font-size: .7em; margin: 0px 1em; word-wrap: break-word; } .category-list-index nav li:hover article { margin-top: 1.7em;display: block;max-height: 4em;/* white-space: nowrap; */overflow: hidden;text-overflow: ellipsis;/* word-wrap: break-word; */display: -webkit-box;-webkit-line-clamp: 4;-webkit-box-orient: vertical;} .category-list-index nav li a { display: none; font-size: .7em; -webkit-border-radius: .2em; -moz-border-radius: .2em; border-radius: .2em; text-shadow: 1px 1px 2px black; font-weight: bold; } .category-list-index nav li a:hover { background: rgb(255,255,255); transition: 0.5s; -webkit-transition: 0.5s; -moz-transition: 0.5s; -o-transition: 0.5s; text-shadow: none; color: rgb(255,15,13); } .category-list-index nav li:hover a { display: block; border: 1px solid rgb(255,255,255); margin: .5em 4em 0; } .category-list-index nav li a:hover { border: 1px solid rgb(255,255,255); } .category-list-index nav li a { color: rgb(255,255,255); } .category-list-index nav li a:hover { text-decoration: none; } @media screen and ( max-width: 768px) { .category-list-index nav li span { font-size: .7em; } .category-list-index nav li { padding: 1em 0 1.3em 0; height: 9em; } .category-list-index nav li:hover article { max-height: 4em; } }
// scrollBanner function scrollBanner(config) { scrollPos = $(this).scrollTop(); config.bannerText.css({ 'margin-top' : -(scrollPos/3) + "px", 'opacity' : 1-(scrollPos/300) }); config.banner.css({ 'background-position': 'center ' + (-scrollPos/4) + "px" }); } $(document).ready(function(){ $(window).scroll(function() { scrollBanner({ banner: $('.banner'), bannerText: $('.banner-text') }); }); });

Related: See More


Questions / Comments: