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>
</head>
<body>
Works in IE10+
<div >
<h2>
Coworker of the year (Please hover over my face)</h2> 
<figure class="cap-bot">
<img src="https://c1.staticflickr.com/1/47/130103241_991b746f12_z.jpg?zz=1" alt="Old forest" />
<figcaption>
<h1>
Cuba</h1>
Hasta la victoria siempre
</figcaption>
</figure>
            
</div>
​
</body>
</html>
 
img {
    display: block;
}
​
img{
    max-width: 100%;
}
​
figure {
display: block;
position: relative;
float: left;
overflow: hidden;
max-width: 60%;
​
/* must be max-width, not width !!! */
}
 
​
figcaption {
​
width: 96%;
  padding:2%;
display:block;
font-size: 2.5vmin;
position: absolute;
background: black;
background: rgba(0, 0, 0, 0.75);
color: white;
opacity: 1;
-webkit-transition: all 1.5s ease;
-moz-transition: all 0.6s ease;
-o-transition: all 0.6s ease;
-ms-transition: all 0.6s ease;
 z-index:0;
}
figcaption h1 {
font-weight: bold;
font-size: 3vmin;
color: limegreen;
  margin:0;
​
}
figure:hover figcaption {
opacity: 1;
}
​
.cap-bot figcaption {
left: 0;
bottom: -39%;
}
.cap-bot:hover figcaption {
bottom:0;
}
Output 300px

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

Dismiss x
public
Bin info
Legends77pro
0viewers