Waqas Waqas - 6 months ago 3x
HTML Question

Image gallery ( images/videos thumbnails with top two horizontal lines)

I have a design like below:
enter image description here

So far, I have done with gallery but now stuck how I can add top two lines using css/html. Please suggest how I can add these lines on top.

my html/css:

.gallery-images img{
width: 100%;
min-height: 250px;

padding: 8px;
border: 0;
border-radius: 0;
-webkit-box-shadow: 0 0 10px #ccc;
box-shadow: 0 0 10px #ccc;
margin: 0;

margin: 15px 0;
.gallery-content p{
font-size: 16px;
font-weight: bold;
margin: 0;

.gallery-content span{
color: gray;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<section class="inner-bemployee-wrap clearfix">
<div class="col-md-4 col-sm-6 col-xs-12">
<div class="thumbnail gallery-images">
<img class="img-responsive" src="images/corporate-news.png" />

<div class="gallery-content">
<p>Album Name</p>
<span>15 Photos</span>


I have used this soudo css:

.gallery-images:after {
content: "";
position: absolute;
width: 100%;
height: 1px;
top: -8px;
border-top: 3px solid #D09A77;

Which is showing line on top, but now problem is in mobile/tabular these lines are not 100% fitted according images. How can I restrict lines according to images while expand/stretch on different devices.


Waqas, i think that can be done by adding just two more divs right above your <div class="thumbnail gallery-images"> .

Try below code.

<div class="first-line"></div>
              <div class="second-line"></div>

 height: 2px;
width: 80%;
border-top: 1px solid #ccc;
padding-bottom: 4px;
margin: 0 auto;}

 height: 2px;
width: 90%;
border-top: 1px solid #ccc;
padding-bottom: 4px;
margin: 0 auto;}

Hope it will help.