Skip to content

Instantly share code, notes, and snippets.

@onerinas

onerinas/index.html

Forked from anonymous/index.html
Created May 13, 2015 07:30
Show Gist options
  • Save onerinas/84d4269b82c5fd781673 to your computer and use it in GitHub Desktop.
Save onerinas/84d4269b82c5fd781673 to your computer and use it in GitHub Desktop.
Download ZIP
foundation image overlay
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<link href="http://cdnjs.cloudflare.com/ajax/libs/foundation/5.0.3/css/normalize.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdnjs.cloudflare.com/ajax/libs/foundation/5.0.3/css/foundation.min.css" rel="stylesheet" type="text/css" />
<script src="http://cdnjs.cloudflare.com/ajax/libs/foundation/5.0.3/js/vendor/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/foundation/5.0.3/js/foundation.min.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
<style id="jsbin-css">
.overlay-container {
position: relative;
}
.overlay-container .overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 0.4rem;
background-color: rgba(255, 255, 255, 0.7);
}
</style>
</head>
<body>
<div class="row">
<div class="large-3 small-6 columns">
<div class="overlay-container">
<img src="http://lorempixel.com/500/300" />
<div class="overlay">Overlay text</div>
</div>
<h6 class="panel"><strong>My Pic Description</strong></h6>
</div>
</div>
<script id="jsbin-source-css" type="text/css">.overlay-container {
position: relative;
}
.overlay-container .overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 0.4rem;
background-color: rgba(255, 255, 255, 0.7);
}</script>
</body>
</html>
Raw
jsbin.rarategulu.css
.overlay-container {
position: relative;
}
.overlay-container .overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 0.4rem;
background-color: rgba(255, 255, 255, 0.7);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment