Wifeo Creative Code

<<< back to homepage for others creatives tricks

MATERIAL DESIGN ALBUM CARD

Wifeo Album

Wifeo/code is a website made by developers and designers to share this code stuff Wifeo/code is a website made by developers and designers to share this code stuff Wifeo/code is a website made by developers and designers to share this code stuff Wifeo/code is a website made by developers and designers to share this code stuff Wifeo/code is a website made by developers and designers to share this code stuff Wifeo/code is a website made by developers and designers to share this code stuff Wifeo/code is a website made by developers and designers to share this code stuff Wifeo/code is a website made by developers and designers to share this code stuff

Read

BLOGGERS, SHARE THIS CREATIVE DEMO ON YOUR WEBSITE :

     
    <p data-height="360" data-theme-id="9277" data-slug-hash="ICndl" data-default-tab="result" data-user="wifeo" class='codepen'>See this Pen on <a href='http://codepen.io/wifeo/pen/ICndl'>Codepen</a>
<script async src="//codepen.io/assets/embed/ei.js"></script><div align="center">View source code on <a href="http://www.wifeo.com/code/41-material-design-album-card.html">wifeo/code</a></div>

On Facebook

On Twitter

On Google+

On LinkedIn

CSS CODE :

.card
{
  background-color:#ffffff;
  margin:5px; 
  width: 250px;
  height:200px;
  position: absolute;
  box-shadow:1px 1px 5px #333333;
  border-radius: 2px;
  overflow: hidden;
  top:80px;
  -webkit-transition:all 0.2s ease-in;
  -moz-transition:all 0.2s ease-in;
  -ms-transition:all 0.2s ease-in;
  transition:all 0.2s ease-in;
}
.card_after
{
  bottom: 0;
  right: 0;
  top: 0;
  left: 0;
  margin: 0;
  position:absolute;
  width:100%;
  height:100%;
  background-color:#ffffff;
  box-shadow:1px 1px 5px #333333;
  border-radius: 2px;
  -webkit-transition:all 0.2s ease-in;
  -moz-transition:all 0.2s ease-in;
  -ms-transition:all 0.2s ease-in;
  transition:all 0.2s ease-in;
}
.nav_bar
{
  background-color:#00897b;
  box-shadow:1px 1px 5px #333333;
  height: 70px;
  position: absolute;
  z-index:1;
  text-align: left;
  top: 0px;
  width: 100%;
  line-height: 70px;
  color: #ffffff;
  font-size: 20px;
  font-weight: 400;
  font-family: 'Roboto';
  -webkit-transition:all 0.2s ease-in;
  -moz-transition:all 0.2s ease-in;
  -ms-transition:all 0.2s ease-in;
  transition:all 0.2s ease-in;
}
.menu_btn
{
  cursor: pointer;
  left:0px;
  margin-top: 16px;
  padding-left: 10px;
}
.pics_card
{
  display:block;
  background-size: cover;
  height: 100px;
  position: relative;
  -webkit-transition:all 0.2s ease-in;
  -moz-transition:all 0.2s ease-in;
  -ms-transition:all 0.2s ease-in;
  transition:all 0.2s ease-in;
}
.pics_card_after
{
  display:block;
  background-size: cover;
  position: relative;
  height : 30%;
  -webkit-transition:all 0.2s ease-in;
  -moz-transition:all 0.2s ease-in;
  -ms-transition:all 0.2s ease-in;
  transition:all 0.2s ease-in;
}
.txt_titre_card
{
  position:absolute;
  bottom:5px;
  left:5px;
  font-size:22px;
  color:#ffffff;
  font-family: 'Roboto';
  font-weight: 300;
}
.txt_titre_card_after
{
  font-size: 52px;
  position:absolute;
  bottom:5px;
  left:5px;
  color:#ffffff;
  font-family: 'Roboto';
  font-weight: 300;
}
.txt_desciption_card
{
  padding: 5px;
  font-size:17px;
  color:#999999;
  font-family: 'Roboto';
  font-weight: 400;
  text-align:left;
}
.txt_desciption_card_after
{
  font-size: 20px;
  padding: 20px;
  color:#999999;
  font-family: 'Roboto';
  font-weight: 400;
  text-align:left;
}
.tool_link
{
  display: inline-block;
  padding:0px 10px 0px 10px;
  text-align: center;
  font-size:17px;
  font-family: 'Roboto';
  font-weight: 500;
  cursor: pointer;
}

JAVASCRIPT CODE :

$(document).ready(function() 
{
    $('.read').click(function()
    {
      $(".pics_card").addClass("pics_card_after").removeClass("pics_card");
      $(".card").addClass("card_after").removeClass("card"); 
      $(".txt_titre_card").addClass("txt_titre_card_after").removeClass("txt_titre_card"); 
      $(".txt_desciption_card").addClass("txt_desciption_card_after").removeClass("txt_desciption_card"); 
    });
    $('.menu_btn').click(function()
    {
      $(".pics_card_after").addClass("pics_card").removeClass("pics_card_after");
      $(".card_after").addClass("card").removeClass("card_after"); 
      $(".txt_titre_card_after").addClass("txt_titre_card").removeClass("txt_titre_card_after"); 
      $(".txt_desciption_card_after").addClass("txt_desciption_card").removeClass("txt_desciption_card_after"); 
    });
});

HTML CODE :

<div style="position:relative; height:500px; overflow:hidden;">
<div class="nav_bar">
    <img src="http:YOUR-URL-IMAGE.png" height="35" class="menu_btn" align="left"/>
    <font style="padding-left:10px;">+Wifeo Creative Code</font>
  </div>

  <div class="card">
    <div class="pics_card" style="background-image: url(http:YOUR-URL-IMAGE.png);">
      <div class="txt_titre_card">Wifeo Album</div>
    </div>
    <div class="txt_desciption_card">
Wifeo/code is a website made by developers and designers to share this code stuff
Wifeo/code is a website made by developers and designers to share this code stuff
Wifeo/code is a website made by developers and designers to share this code stuff
Wifeo/code is a website made by developers and designers to share this code stuff
Wifeo/code is a website made by developers and designers to share this code stuff
Wifeo/code is a website made by developers and designers to share this code stuff
Wifeo/code is a website made by developers and designers to share this code stuff
Wifeo/code is a website made by developers and designers to share this code stuff</div>
<div align="left" style="position:absolute;bottom:0px; width:100%;background-color: #ffffff;padding-top:6px;">
<div class="tool_link" style="color:#333333;">Share</div>
<div class="read tool_link" style="color:#ff8f00;">Read</div>
    </div>
  </div>
</div>