"Category"
Bootstrap 4.1.1 Snippet by uaKalwin

Post to Facebook Tweet this

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<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">
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
.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; }
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// 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')
});
});
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Now UI Kit Angular
Portfolio Gallery with filtering category

Questions / Comments: