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>
  <link href='http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:400,700' rel='stylesheet' type='text/css'>
​
</head>
<body>
​
  <div class="server">
    <div class="overlay">
      <h1><span>Hunger games</span><small>HG1.Play-Minezone.co</small></h1>
      <div class="more-info">
        <p>Hunger games is a full-out hardcore PvP experience, with only one winner. The objective of the game is to be the last one standing. Will you team with others, go solo, and conquer the battlefield?</p>
        <p>Only you are left to decide</p>
      </div>
        <div class="arrow up"></div>
        <div class="numbers">45/90</div>
    </div>
  </div>
</body>
</html>
​
 
.server {
  background: url('http://placekitten.com/300/300') center no-repeat;
  font-family: 'Yanone Kaffeesatz', sans-serif;
  text-align: center;
  width:  300px;
  height: 300px;
  overflow: hidden;
  position: relative;
}
​
.server:hover .overlay{ 
   background-color: rgba(0,0,0,0.5);
}
​
.server:hover .more-info{ 
  display: block;
}
​
h1{ 
  color: #e9c319;
  font-size: 50px;
  margin-top: 5px;
  margin-bottom: 5px;
  text-transform: uppercase;
  text-shadow: 1px 1px 2px #222;
}
​
h1 small{ 
  color:     white;
  display:   block;
  font-size: 16px;
  font-weight: normal;
}
​
.overlay{ 
  box-shadow: inset 0 0 30px #000;
  box-sizing: border-box;
  color: orange;
  padding: 0 10px;;
  position: absolute;
  text-transform: uppercase;
  height: 100%;
  width: 100%;
}
​
.overlay p { 
  margin-top: 0;
  margin-bottom: 5px;
}
​
.more-info{ 
  display: none;
  width: 100%;
}
​
.numbers{ 
  color: white;
  position: absolute;
  bottom: 10px;
  right: 5px;
}
​
.arrow{ 
  width: 40px;
  height: 40px;
  position: absolute;
  bottom: 10px;
  left: 5px;
}
​
.arrow.up{ 
  background-color: green;
}
​
.arrow.down{ 
  background-color: red;
}
Output 300px

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

Dismiss x
public
Bin info
sunyatasattvapro
0viewers