thumbnails gallery with overlays

This bootstrap snippet called "thumbnails gallery with overlays" was created to help web designers,
front-end developers and back-end developer save time. Use it in your project and build your app faster,
You can also download the HTML, CSS, and JS code
tags: gallery,thumbnail,images

This is the HTML code for this bootstrap snippet

Copy, paste, change, customize and run the following HTML code to get a result like the one shown in the preview tab

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet">
<div class="row">
	<div class="col-xs-12">
		<!-- PAGE CONTENT BEGINS -->
		<div>
			<ul class="ace-thumbnails clearfix">
				<li>
					<a href="#" title="Photo Title" data-rel="colorbox" class="cboxElement">
						<img width="150" height="150" alt="150x150" src="https://bootdey.com/img/Content/avatar/avatar1.png">
					</a>

					<div class="tags">
						<span class="label-holder">
							<span class="label label-info">breakfast</span>
						</span>

						<span class="label-holder">
							<span class="label label-danger">fruits</span>
						</span>

						<span class="label-holder">
							<span class="label label-success">toast</span>
						</span>

						<span class="label-holder">
							<span class="label label-warning arrowed-in">diet</span>
						</span>
					</div>

					<div class="tools">
						<a href="#">
							<i class="ace-icon fa fa-link"></i>
						</a>

						<a href="#">
							<i class="ace-icon fa fa-paperclip"></i>
						</a>

						<a href="#">
							<i class="ace-icon fa fa-pencil"></i>
						</a>

						<a href="#">
							<i class="ace-icon fa fa-times red"></i>
						</a>
					</div>
				</li>

				<li>
					<a href="#" data-rel="colorbox" class="cboxElement">
						<img width="150" height="150" alt="150x150" src="https://bootdey.com/img/Content/avatar/avatar2.png">
						<div class="text">
							<div class="inner">Sample Caption on Hover</div>
						</div>
					</a>
				</li>

				<li>
					<a href="#" data-rel="colorbox" class="cboxElement">
						<img width="150" height="150" alt="150x150" src="https://bootdey.com/img/Content/avatar/avatar3.png">
						<div class="text">
							<div class="inner">Sample Caption on Hover</div>
						</div>
					</a>

					<div class="tools tools-bottom">
						<a href="#">
							<i class="ace-icon fa fa-link"></i>
						</a>

						<a href="#">
							<i class="ace-icon fa fa-paperclip"></i>
						</a>

						<a href="#">
							<i class="ace-icon fa fa-pencil"></i>
						</a>

						<a href="#">
							<i class="ace-icon fa fa-times red"></i>
						</a>
					</div>
				</li>

				<li>
					<a href="#" data-rel="colorbox" class="cboxElement">
						<img width="150" height="150" alt="150x150" src="https://bootdey.com/img/Content/avatar/avatar4.png">
						<div class="tags">
							<span class="label-holder">
								<span class="label label-info arrowed">fountain</span>
							</span>

							<span class="label-holder">
								<span class="label label-danger">recreation</span>
							</span>
						</div>
					</a>

					<div class="tools tools-top">
						<a href="#">
							<i class="ace-icon fa fa-link"></i>
						</a>

						<a href="#">
							<i class="ace-icon fa fa-paperclip"></i>
						</a>

						<a href="#">
							<i class="ace-icon fa fa-pencil"></i>
						</a>

						<a href="#">
							<i class="ace-icon fa fa-times red"></i>
						</a>
					</div>
				</li>

				<li>
					<div>
						<img width="150" height="150" alt="150x150" src="https://bootdey.com/img/Content/avatar/avatar5.png">
						<div class="text">
							<div class="inner">
								<span>Some Title!</span>

								<br>
								<a href="#" data-rel="colorbox" class="cboxElement">
									<i class="ace-icon fa fa-search-plus"></i>
								</a>

								<a href="#">
									<i class="ace-icon fa fa-user"></i>
								</a>

								<a href="#">
									<i class="ace-icon fa fa-share"></i>
								</a>
							</div>
						</div>
					</div>
				</li>

				<li>
					<a href="#" data-rel="colorbox" class="cboxElement">
						<img width="150" height="150" alt="150x150" src="https://bootdey.com/img/Content/avatar/avatar6.png">
					</a>

					<div class="tools tools-right">
						<a href="#">
							<i class="ace-icon fa fa-link"></i>
						</a>

						<a href="#">
							<i class="ace-icon fa fa-paperclip"></i>
						</a>

						<a href="#">
							<i class="ace-icon fa fa-pencil"></i>
						</a>

						<a href="#">
							<i class="ace-icon fa fa-times red"></i>
						</a>
					</div>
				</li>

				<li>
					<a href="#" data-rel="colorbox" class="cboxElement">
						<img width="150" height="150" alt="150x150" src="https://bootdey.com/img/Content/avatar/avatar6.png">
					</a>

					<div class="tools">
						<a href="#">
							<i class="ace-icon fa fa-link"></i>
						</a>

						<a href="#">
							<i class="ace-icon fa fa-paperclip"></i>
						</a>

						<a href="#">
							<i class="ace-icon fa fa-pencil"></i>
						</a>

						<a href="#">
							<i class="ace-icon fa fa-times red"></i>
						</a>
					</div>
				</li>

				<li>
					<a href="#" data-rel="colorbox" class="cboxElement">
						<img width="150" height="150" alt="150x150" src="https://bootdey.com/img/Content/avatar/avatar2.png">
					</a>

					<div class="tools tools-top in">
						<a href="#">
							<i class="ace-icon fa fa-link"></i>
						</a>

						<a href="#">
							<i class="ace-icon fa fa-paperclip"></i>
						</a>

						<a href="#">
							<i class="ace-icon fa fa-pencil"></i>
						</a>

						<a href="#">
							<i class="ace-icon fa fa-times red"></i>
						</a>
					</div>
				</li>
			</ul>
		</div><!-- PAGE CONTENT ENDS -->
	</div><!-- /.col -->
</div>

This is the CSS code for this bootstrap snippet

Copy, paste, change, customize and run the following CSS code to get a result Like the one shown in the preview

body{margin-top:20px;}

.ace-thumbnails>li,
.ace-thumbnails>li>:first-child {
    display: block;
    position: relative
}

.ace-thumbnails {
    list-style: none;
    margin: 0;
    padding: 0
}

.ace-thumbnails>li {
    float: left;
    overflow: hidden;
    margin: 2px;
    border: 2px solid #333
}

.ace-thumbnails>li>:first-child:focus {
    outline: 0
}

.ace-thumbnails>li .tags {
    display: inline-block;
    position: absolute;
    bottom: 0;
    right: 0;
    overflow: visible;
    direction: rtl;
    padding: 0;
    margin: 0;
    height: auto;
    width: auto;
    background-color: transparent;
    border-width: 0;
    vertical-align: inherit
}

.ace-thumbnails>li .tags>.label-holder {
    opacity: .92;
    filter: alpha(opacity=92);
    display: table;
    margin: 1px 0 0;
    direction: ltr;
    text-align: left
}

.ace-thumbnails>li>.tools,
.ace-thumbnails>li>:first-child>.text {
    position: absolute;
    text-align: center;
    background-color: rgba(0, 0, 0, .55)
}

.ace-thumbnails>li .tags>.label-holder:hover {
    opacity: 1;
    filter: alpha(opacity=100)
}

.ace-thumbnails>li>.tools {
    top: 0;
    bottom: 0;
    left: -30px;
    width: 24px;
    vertical-align: middle;
    -webkit-transition: all .2s ease;
    -o-transition: all .2s ease;
    transition: all .2s ease
}

.ace-thumbnails>li>.tools.tools-right {
    left: auto;
    right: -30px
}

.ace-thumbnails>li>.tools.tools-bottom {
    width: auto;
    height: 28px;
    left: 0;
    right: 0;
    top: auto;
    bottom: -30px
}

.ace-thumbnails>li>.tools.tools-top {
    width: auto;
    height: 28px;
    left: 0;
    right: 0;
    top: -30px;
    bottom: auto
}

.ace-thumbnails>li:hover>.tools {
    left: 0;
    right: 0
}

.ace-thumbnails>li:hover>.tools.tools-bottom {
    top: auto;
    bottom: 0
}

.ace-thumbnails>li:hover>.tools.tools-top {
    bottom: auto;
    top: 0
}

.ace-thumbnails>li:hover>.tools.tools-right {
    left: auto;
    right: 0
}

.ace-thumbnails>li>.in.tools {
    left: 0;
    right: 0
}

.ace-thumbnails>li>.in.tools.tools-bottom {
    top: auto;
    bottom: 0
}

.ace-thumbnails>li>.in.tools.tools-top {
    bottom: auto;
    top: 0
}

.ace-thumbnails>li>.in.tools.tools-right {
    left: auto;
    right: 0
}

.ace-thumbnails>li>.tools>a,
.ace-thumbnails>li>:first-child .inner a {
    display: inline-block;
    color: #FFF;
    font-size: 18px;
    font-weight: 400;
    padding: 0 4px
}

.ace-thumbnails>li>.tools>a:hover,
.ace-thumbnails>li>:first-child .inner a:hover {
    text-decoration: none;
    color: #C9E2EA
}

.ace-thumbnails>li .tools.tools-bottom>a,
.ace-thumbnails>li .tools.tools-top>a {
    display: inline-block
}

.ace-thumbnails>li>:first-child>.text {
    right: 0;
    left: 0;
    bottom: 0;
    top: 0;
    color: #FFF;
    opacity: 0;
    filter: alpha(opacity=0);
    -webkit-transition: all .2s ease;
    -o-transition: all .2s ease;
    transition: all .2s ease
}

.dialogs,
.itemdiv {
    position: relative
}

.ace-thumbnails>li>:first-child>.text:before {
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
    margin-right: 0
}

.ace-thumbnails>li>:first-child>.text>.inner {
    padding: 4px 0;
    margin: 0;
    display: inline-block;
    vertical-align: middle;
    max-width: 90%
}

.ace-thumbnails>li:hover>:first-child>.text {
    opacity: 1;
    filter: alpha(opacity=100)
}

@media only screen and (max-width:480px) {
    .ace-thumbnails {
        text-align: center
    }
    .ace-thumbnails>li {
        float: none;
        display: inline-block
    }
}
                                    

Information about this bootstrap snippet

Creator: Dey Dey

Bootstrap version: 3.3.6

Created: Apr 22nd 2016, 20:03

Views: 2.3K

Rated 5/5 based on 2 reviews