Wifeo Creative Code

<<< back to homepage for others creatives tricks

CSS HOVER INFORMATION

BEST HOME

This home is the best

BEST PIC

This pic is the best

BEST PC

This computer is the best

BLOGGERS, SHARE THIS CREATIVE DEMO ON YOUR WEBSITE :

     
    <p data-height="360" data-theme-id="9277" data-slug-hash="lbrqi" data-default-tab="result" data-user="wifeo" class='codepen'>See this Pen on <a href='http://codepen.io/wifeo/pen/lbrqi'>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/18-css-hover-information.html">wifeo/code</a></div>

On Facebook

On Twitter

On Google+

On LinkedIn

CSS CODE :

.carre_couleur
{
  width:200px;
  height: 200px;
  display: inline-block;
  position: relative;
  margin-top: 0px;
}
.base_hov .retract
{
  -webkit-transition: all 200ms ease-in;
  -webkit-transform-origin: 50% 20%;
  -webkit-transform: scale(1);
  -moz-transition: all 200ms ease-in;
  -moz-transform-origin: 50% 20%;
  -moz-transform: scale(1);
  -ms-transition: all 200ms ease-in;
  -ms-transform-origin: 50% 20%;
  -ms-transform: scale(1);
  transition: all 200ms ease-in;
  transform-origin: 50% 20%;
  transform: scale(1);
  width:200px;
  height: 200px;
  position: absolute;
  z-index: 2;
  left:0;
}
.base_hov:hover .retract
{
  -webkit-transition: all 200ms ease-in;
  -webkit-transform: scale(0.6);
  -moz-transition: all 200ms ease-in;
  -moz-transform: scale(0.6);
  -ms-transition: all 200ms ease-in;
  -ms-transform: scale(0.6);
  transition: all 200ms ease-in;
  transform: scale(0.6);
}
.acced
{
  width: 180px;
  padding:10px;
  bottom:0; 
  position:absolute;
  z-index: 1; 
  text-align: left;
}
.big_acced
{
  color:#ffffff;
  font-size:25px;
  font-weight: 400;
}
.middle_acced
{
  color:#ffffff;
  font-size:15px;
  font-weight: 400;
}

HTML CODE :

<div align="center">

    <div class="carre_couleur base_hov" style="background-color:#f8b334;">
      <div class="retract" style="background-color:#f8b334;">
<img src="http:YOUR-URL-IMAGE.png"></div>
      <div class="acced">
        <div class="big_acced" style="color:#f39c12;">BEST HOME</div>
        <div class="middle_acced">This home is the best</div>
      </div>
    </div>
    <div class="carre_couleur base_hov" style="background-color:#2ecc71;">
      <div class="retract" style="background-color:#2ecc71;">
<img src="http:YOUR-URL-IMAGE.png"></div>
      <div class="acced">
        <div class="big_acced" style="color:#27ae60;">BEST PIC</div>
        <div class="middle_acced">This pic is the best</div>
      </div>
    </div>
    <div class="carre_couleur base_hov" style="background-color:#e74c3c;">
      <div class="retract" style="background-color:#e74c3c;">
<img src="http:YOUR-URL-IMAGE.png"></div>
      <div class="acced">
        <div class="big_acced" style="color:#c0392b;">BEST PC</div>
        <div class="middle_acced">This computer is the best</div>
      </div>
    </div>

</div>