Waqas Waqas - 7 months ago 12
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;
}

.gallery-images{
padding: 8px;
border: 0;
border-radius: 0;
-webkit-box-shadow: 0 0 10px #ccc;
box-shadow: 0 0 10px #ccc;
margin: 0;
}

.gallery-content{
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>
<div class="gallery-content">
<p>Album Name</p>
<span>15 Photos</span>
</div>
</div>

</section>





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.

Answer

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>



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

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

Hope it will help.