Bootstrap Snippet image Gallery with Thumbnail Carousel using HTML CSS Bootstrap

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/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="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
 <head>
     
  <link href="http://alhabashy.com/css/bootstrap.min.css" type="text/css" rel="stylesheet">
    <link href="http://alhabashy.com/css/owl.carousel.css" type="text/css" rel="stylesheet">
    <link href="http://alhabashy.com/css/styleslider.css" type="text/css" rel="stylesheet">
    <link href="http://alhabashy.com/css/font-awesome.min.css" type="text/css" rel="stylesheet">
    <link href="http://alhabashy.com/css/animate.css" type="text/css" rel="stylesheet">
    <link href="http://alhabashy.com/css/responsive.css" type="text/css" rel="stylesheet">
         </head>
    <div class="single-portfolio"> 
                <div class="container">
                    <div id="carousel" class="carousel slide" data-ride="carousel">
                        <div class="single-portfolio__main-img carousel-inner">
                            <div class="item active"> <img src="https://metrouk2.files.wordpress.com/2018/07/gettyimages-963258488.jpg"> </div>
                            
                            
                            <div class="item"> <img src="https://media-public.fcbarcelona.com/20157/0/document_thumbnail/20197/11/31/187/45817611/1.0-10/45817611.jpg"> </div>
                            
                            
                            <div class="item"> <img src="https://cdn.newsapi.com.au/image/v1/ad2cc96b9fbd8d08ad4a631d172d93a3"> </div>
                            
                            
                            <div class="item"> <img src="https://dailynewsegyptcom-mokannggxlave7h.stackpathdns.com/app/uploads/2016/06/Abu-Trika-768x430.jpg"> </div>
                            
                            
                            
                                <div class="item"> <img src="http://e1.365dm.com/18/03/16-9/20/skysports-mesut-ozil-arsenal_4252995.jpg"> </div>
                                
                                
                                
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

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
.content {
    position: relative;
    overflow: hidden;
}
.content .content-overlay {
    position: absolute;
    background: #5b1c4cde!important;
    height: 100%;
    width: 100%;
    left: 0;
    top: 0;
    opacity: 0;
    background: 0;
    transition: all .4s ease-in-out 0s;
}
.content .content-overlay {
    background: #5b1c4cde!important;
}
.content:hover .content-overlay {
    opacity: 1
}
.content-image {
    width: 100%;
    border: 1px solid #570f43
}
.content-details {
    position: absolute;
    text-align: center;
    padding-left: 1em;
    padding-right: 1em;
    width: 100%;
    top: 50%;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

" image Gallery with Thumbnail Carousel"
Bootstrap 3.3.0 Snippet by mohamedadel

Related: See More

Questions / Comments:

" image Gallery with Thumbnail Carousel" Bootstrap 3.3.0 Snippet by mohamedadel

Related: See More

Questions / Comments:

" image Gallery with Thumbnail Carousel"
Bootstrap 3.3.0 Snippet by mohamedadel