Panels with cool rotating hover effect suitable for any modern portfolio.

<div class="container">
  <div class="page-header">
    <h1 class="text-center">Who am I?</h1>
  </div>
  <p class="lead text-center">I am a creative graphic designer focused on modern eye catching designs. I am not only the graphic designer! I can also do complete websites &amp; computer applications.</p>
  <div class="container">
    <div class="row stylish-panel">
      <div class="col-md-4">
        <div>
          <img src="http://lorempixel.com/200/200/abstract/1/" alt="Texto Alternativo" class="img-circle img-thumbnail">
          <h2>Webdesigner</h2>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua.
          </p>
          <a href="#" class="btn btn-primary" title="See more">See works »</a>
        </div>
      </div>
      <div class="col-md-4">
        <div>
          <img src="http://lorempixel.com/200/200/abstract/2/" alt="Texto Alternativo" class="img-circle img-thumbnail">
          <h2>Photographer</h2>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua.
          </p>
          <a href="#" class="btn btn-primary" title="See more">See works »</a>
        </div>
      </div>
      <div class="col-md-4">
        <div>
          <img src="http://lorempixel.com/200/200/abstract/3/" alt="Texto Alternativo" class="img-circle img-thumbnail">
          <h2>Copywriter</h2>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua.
          </p>
          <a href="#" class="btn btn-primary" title="See more">See works »</a>
        </div>
      </div>
    </div>
    <div class="row stylish-panel">
      <div class="col-md-4">
        <div>
          <img src="http://lorempixel.com/200/200/abstract/4/" alt="Texto Alternativo" class="img-circle img-thumbnail">
          <h2>Webdesigner</h2>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua.
          </p>
          <a href="#" class="btn btn-primary" title="See more">See works »</a>
        </div>
      </div>
      <div class="col-md-4">
        <div>
          <img src="http://lorempixel.com/200/200/abstract/5/" alt="Texto Alternativo" class="img-circle img-thumbnail">
          <h2>Photographer</h2>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua.
          </p>
          <a href="#" class="btn btn-primary" title="See more">See works »</a>
        </div>
      </div>
      <div class="col-md-4">
        <div>
          <img src="http://lorempixel.com/200/200/abstract/6/" alt="Texto Alternativo" class="img-circle img-thumbnail">
          <h2>Copywriter</h2>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua.
          </p>
          <a href="#" class="btn btn-primary" title="See more">See works »</a>
        </div>
      </div>
    </div>
  </div>
</div>
<!-- /container -->
.stylish-panel {
    padding: 20px 0;
    text-align: center;
}
.stylish-panel > div > div{
    padding: 10px;
    border: 1px solid transparent;
    border-radius: 4px;
    transition: 0.2s;
}
.stylish-panel > div:hover > div{
    margin-top: -10px;
    border: 1px solid rgb(200, 200, 200);
    box-shadow: rgba(0, 0, 0, 0.1) 0px 5px 5px 2px;
    background: rgba(200, 200, 200, 0.1);
    transition: 0.5s;
}

.stylish-panel > div:hover img {
    border-radius: 50%;
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg);
}

Twitter Facebook Google+ Stumbleupon LinkedIn


Leave a comment

You may like...

Compose message form in a modal box. Very simple, but useful layout for any application using messages.

Thumbnail of Compose message code snippet Compose message

Awesome tree view control in pure Bootstrap with few lines of javascript!

Thumbnail of Tree view list code snippet Tree view list

Simple FAQ page with accordion. This is useful for any business website. Just try to click on some questions.

Thumbnail of FAQ with accordion code snippet FAQ with accordion