Portfolio with details on hover

This bootstrap snippet called "Portfolio with details on hover" 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: list,detail,hover

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


  <div class="container bootstrap snippet">
    <div class="row">
        <div class="col-sm-8 col-md-9 col-lg-9 text-center">
            <h1 class="text-primary"><b>Portfolio</b></h1>
        </div>
    </div>
    <div class="row">
        <div class="media">
          <div class="row">
            <div class="media-img col-sm-4 col-md-3 col-lg-3">
              <div class="img-overlay"> 
                <a href="#" class="btn btn-primary">Details</a> 
              </div>
              <img class="port-image" src="https://lorempixel.com/400/400/business/6/">          
            </div>
            <div class="col-sm-8 col-md-9 col-lg-9">
              <h3>
                <a href="#">
                  Portfolio name       
                </a>
              </h3>
              <h6>
                <span class="Newsletter">Newsletter</span> 
                <span class="sep">/</span> 
                <span class="Web Design">Web Design</span> 
                <span class="sep">/</span> 
              </h6>          
              <p>
                A complete description for this work
                y para no utilizar lorem ipsum escribire mucho texto
                por ejemplo Bootdey es una galería de fragmentos de bootstrap gratis
                Códigos html Css Js 
              </p>
            </div>
          </div>
        </div>

        <div class="media">
          <div class="row">
            <div class="media-img col-sm-4 col-md-3 col-lg-3">
              <div class="img-overlay"> 
                <a href="#" class="btn btn-primary">Details</a> 
              </div>
              <img class="port-image" src="https://lorempixel.com/400/400/nature/6/">          
            </div>
            <div class="col-sm-8 col-md-9 col-lg-9">
              <h3>
                <a href="#">
                  Portfolio name       
                </a>
              </h3>
              <h6>
                <span class="Newsletter">Newsletter</span> 
                <span class="sep">/</span> 
                <span class="Web Design">Web Design</span> 
                <span class="sep">/</span> 
              </h6>          
              <p>
                A complete description for this work
                y para no utilizar lorem ipsum escribire mucho texto
                por ejemplo Bootdey es una galería de fragmentos de bootstrap gratis
                Códigos html Css Js 
              </p>
            </div>
          </div>
        </div>

        <div class="media">
          <div class="row">
            <div class="media-img col-sm-4 col-md-3 col-lg-3">
              <div class="img-overlay"> 
                <a href="#" class="btn btn-primary">Details</a> 
              </div>
              <img class="port-image" src="https://lorempixel.com/400/400/people/6/">          
            </div>
            <div class="col-sm-8 col-md-9 col-lg-9">
              <h3>
                <a href="#">
                  Portfolio name       
                </a>
              </h3>
              <h6>
                <span class="Newsletter">Newsletter</span> 
                <span class="sep">/</span> 
                <span class="Web Design">Web Design</span> 
                <span class="sep">/</span> 
              </h6>          
              <p>
                A complete description for this work
                y para no utilizar lorem ipsum escribire mucho texto
                por ejemplo Bootdey es una galería de fragmentos de bootstrap gratis
                Códigos html Css Js 
              </p>
            </div>
          </div>
        </div>
    </div>
  </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


@import url('http://fonts.googleapis.com/css?family=Open+Sans:200,300');

body{
    font-family: 'Open Sans',Arial,Helvetica,Sans-Serif;
    background: none repeat scroll 0 0 #ebeeed;
}
.port-image{
    width:400px;
    height:400px;
}

.media {
    background: none repeat scroll 0 0 #fff;
    border-bottom: 1px solid #c7c9c8;
    margin-bottom: 30px;
}

.media a {
    overflow: hidden;
}

.media-img {
    overflow: hidden;
    padding: 0;
    position: relative;
}

.media-img .img-overlay {
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0.4);
    height: 100%;
    opacity: 0;
    padding-top: 50%;
    position: absolute;
    text-align: center;
    transition: opacity 0.3s ease-out 0s;
    visibility: hidden;
    width: 100%;
    z-index: 4;
}

.media:hover .img-overlay a, .media .img-overlay:hover a {
    display: inline-block;
}

.media:hover .img-overlay, .media .media-img:hover .img-overlay {
    opacity: 1;
    transition: opacity 0.3s ease-out 0s;
    visibility: visible;
}

.media div.media-img img {
    height: auto;
    transform: scale(1, 1);
    transition-duration: 2000ms;
    transition-timing-function: ease-out;
    width: 100%;
}


                                    

Information about this bootstrap snippet

Creator: Dey Dey

Bootstrap version: 3.1.1

Created: Jul 7th 2014, 00:55

Views: 4.9K

Rated 5/5 based on 4 reviews