Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  
  <style>
    .col-lg-6
    {
      display: inline-block;
    }
    
    /* Company Logo Options */
    .co-logo {
      padding: 5px;
      width: 300px;
      margin-top: 20px;
      box-shadow: 0px 0px 0px 1px #000000;
      
      position: relative;
    }
​
    .co-logo:hover {
      width: 300px;
    }
​
    .co-logo .img
    {
      width: 300px;
    }
​
    .textoverlay {
      width:100%; 
      height: 100%;
      vertical-align: middle;
      background:#f0f;
      color: #fff;
      background: rgba(22,140,100,0.8);
      position: absolute;
      text-align: center;
      top: 0;
      left: 0;
      opacity: 0;
      
      text-transform: uppercase;
      font-size: 24px;
      font-family: 'Avenir Next', 'AvenirNext', sans-serif;
      font-weight: 900;
      
      transition: all 0.3s ease-in-out; /* animations */
      
      padding-top: 100px;
      box-sizing: border-box;/* quick n dirty */
      overflow: hidden;
    }
    
    .textoverlay.fancy
    {
      background: rgba(22,100,140,0.8);
    }
    
    .textoverlay.fancy div
    {
      transform: translateY(-200px);
      -webkit-transform: translateY(-200px) scale(0.2);
      transition: all 0.3s ease-in-out;
    }
    
    .co-logo:hover > .textoverlay
    {
      opacity: 1.0;
    }
    
    .co-logo:hover > .textoverlay.fancy div
    {
      transform: translateY(0px);
      -webkit-transform: translateY(0px);
    }
  </style>
</head>
<body>
<div class="container" ng-init="getCompanies()">
​
<!-- Repeater herev-->
<div class="col-lg-6">
    <div class="row vertical-align" ng-repeat="company in companies">
        <!-- Company Logos -->
        <div class="co-logo">
            <img src="http://www.nose2tail.co.uk/cat-matlock-derbyshire.jpg" class="img" alt="" />
            <!-- Hover Text -->
            <div class="textoverlay">
              Cat Inc.
            </div>
        </div>
    </div>
</div>
  
  <!-- Repeater herev-->
<div class="col-lg-6">
    <div class="row vertical-align" ng-repeat="company in companies">
        <!-- Company Logos -->
        <div class="co-logo">
            <img src="http://i.ytimg.com/vi/tntOCGkgt98/maxresdefault.jpg" class="img" alt="" />
            <!-- Hover Text -->
            <div class="textoverlay fancy">
              <div>Cat &mdash; Sandwich</div>
            </div>
        </div>
    </div>
</div>
</div>
</body>
</html>
 
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers