Skip to content

Instantly share code, notes, and snippets.

@JSDiamond
Last active June 16, 2019 03:54
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save JSDiamond/5c4d102d4703328f6d5e to your computer and use it in GitHub Desktop.
Save JSDiamond/5c4d102d4703328f6d5e to your computer and use it in GitHub Desktop.
Thumbnail image transitions

Simple CSS3 image transitions

With some help from d3

<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" href="http://www.bloomberg.com/graphics/assets/img/favicon.png" type="image/x-icon">
<title>thumbnail flyover</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
.image-bin{
max-width: 900px;
height: 608px;
margin: 0 auto;
position: relative;
}
.image-bin img{
width: 100%;
position: absolute;
z-index: 2;
pointer-events: none;
left: 10%;
top: 0%;
border: 2px solid #333;
-webkit-transition: width 0.55s ease, opacity 0.4s, border-width 0.6s ease, top 0.777s ease, left 0.777s ease, margin-top 0.4s ease, z-index 0.1s 0.5s ease;
-moz-transition: width 0.55s ease, opacity 0.4s, border-width 0.6s ease, top 0.777s ease, left 0.777s ease, margin-top 0.4s ease, z-index 0.1s 0.5s ease;
-ms-transition: width 0.55s ease, opacity 0.4s, border-width 0.6s ease, top 0.777s ease, left 0.777s ease, margin-top 0.4s ease, z-index 0.1s 0.5s ease;
-o-transition: width 0.55s ease, opacity 0.4s, border-width 0.6s ease, top 0.777s ease, left 0.777s ease, margin-top 0.4s ease, z-index 0.1s 0.5s ease;
transition: width 0.55s ease, opacity 0.4s, border-width 0.6s ease, top 0.777s ease, left 0.777s ease, margin-top 0.4s ease, z-index 0.1s 0.5s ease;
}
.image-bin img.tiny{
width: 10px;
border: none;
}
.image-bin img.medium{
width: 80%;
margin-top: 20px;
left: 10% !important;
/*top: 0% !important;*/
border: 3px solid #333;
z-index: 3;
-webkit-transition: width 0.5s ease, opacity 0.4s, border-width 0.6s ease, top 0.8s ease, left 0.8s ease, margin-top 0.4s ease, z-index 0s;
-moz-transition: width 0.5s ease, opacity 0.4s, border-width 0.6s ease, top 0.8s ease, left 0.8s ease, margin-top 0.4s ease, z-index 0s;
-ms-transition: width 0.5s ease, opacity 0.4s, border-width 0.6s ease, top 0.8s ease, left 0.8s ease, margin-top 0.4s ease, z-index 0s;
-o-transition: width 0.5s ease, opacity 0.4s, border-width 0.6s ease, top 0.8s ease, left 0.8s ease, margin-top 0.4s ease, z-index 0s;
transition: width 0.5s ease, opacity 0.4s, border-width 0.6s ease, top 0.8s ease, left 0.8s ease, margin-top 0.4s ease, z-index 0s;
}
.box-bin{
width: 100px;
margin: 0px auto 0;
position: relative;
top: 30px;
}
.box-bin .box{
width: 10px;
height: 14px;
margin: 1px 3px;
background-color: coral;
border: 1px solid #333;
display: inline-block;
transition: border 0.6s ease;
}
.box-bin .box:hover{
border: 1px solid coral;
}
</style>
</head>
<body>
<div class="image-bin">
<img src="http://www.bloomberg.com/graphics/2015-red-meat-cancer/img/processed.png" data-agent="1" class="hidden meat">
<img src="http://www.bloomberg.com/graphics/2015-red-meat-cancer/img/beef.jpg" data-agent="2" class="hidden meat">
<img src="http://www.bloomberg.com/graphics/2015-red-meat-cancer/img/caprolactam-71.png" data-agent="3" class="hidden probnot">
<img src="http://www.bloomberg.com/graphics/2015-red-meat-cancer/img/smokeless-89-b.png" data-agent="4" class="hidden vice">
<img src="http://www.bloomberg.com/graphics/2015-red-meat-cancer/img/tobaccosmoke-100E.png" data-agent="5" class="hidden vice">
<img src="http://www.bloomberg.com/graphics/2015-red-meat-cancer/img/alcohol-100E.png" data-agent="6" class="hidden vice">
<img src="http://www.bloomberg.com/graphics/2015-red-meat-cancer/img/coffee-51.png" data-agent="7" class="hidden vice">
<img src="http://www.bloomberg.com/graphics/2015-red-meat-cancer/img/airpolution-105.png" data-agent="8" class="hidden pollution">
<img src="http://www.bloomberg.com/graphics/2015-red-meat-cancer/img/diesel-105.png" data-agent="9" class="hidden pollution">
<img src="http://www.bloomberg.com/graphics/2015-red-meat-cancer/img/indooremissions-95.png" data-agent="10" class="hidden pollution">
<img src="http://www.bloomberg.com/graphics/2015-red-meat-cancer/img/gasoline-105.png" data-agent="11" class="hidden pollution">
<img src="http://www.bloomberg.com/graphics/2015-red-meat-cancer/img/xray-100D-b.png" data-agent="12" class="hidden sun">
<img src="http://www.bloomberg.com/graphics/2015-red-meat-cancer/img/solar-100D.png" data-agent="13" class="hidden sun">
<img src="http://www.bloomberg.com/graphics/2015-red-meat-cancer/img/tanning-100D.png" data-agent="14" class="hidden sun">
<img src="http://www.bloomberg.com/graphics/2015-red-meat-cancer/img/ionizing-100D.png" data-agent="15" class="hidden sun">
<img src="http://www.bloomberg.com/graphics/2015-red-meat-cancer/img/painter-100F.png" data-agent="16" class="hidden occupation">
<img src="http://www.bloomberg.com/graphics/2015-red-meat-cancer/img/shift-98.png" data-agent="17" class="hidden occupation">
<img src="http://www.bloomberg.com/graphics/2015-red-meat-cancer/img/hair-99.png" data-agent="18" class="hidden occupation">
<img src="http://www.bloomberg.com/graphics/2015-red-meat-cancer/img/drycleaning-63.png" data-agent="19" class="hidden occupation">
<img src="http://www.bloomberg.com/graphics/2015-red-meat-cancer/img/wooddust-100C.png" data-agent="20" class="hidden poison">
<img src="http://www.bloomberg.com/graphics/2015-red-meat-cancer/img/shale-100F.png" data-agent="21" class="hidden poison">
<img src="http://www.bloomberg.com/graphics/2015-red-meat-cancer/img/formaldehyde-100F.png" data-agent="22" class="hidden poison">
<img src="http://www.bloomberg.com/graphics/2015-red-meat-cancer/img/roundup-112.png" data-agent="23" class="hidden poison">
<div class="box-bin">
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<script type="text/javascript">
var imgs = d3.selectAll('.image-bin img')
var boxbin = d3.select('.box-bin')
var imagebin = d3.selectAll('.image-bin')
var imagebin_position = imagebin.node().getBoundingClientRect()
var boxes = boxbin.selectAll('div')
.data(d3.range(imgs[0].length))
.enter()
.append('div')
.classed('box', true)
.on('mouseover', function(d,i){
d3.select('.image-bin img[data-agent="' + ( i + 1 ) + '"]')
.classed('medium', true)
})
.on('mouseleave', function(d,i){
d3.select('.image-bin img.medium')
.classed('medium', false)
})
imgs
.style('left', function(d,i){
return boxes[0][i].getBoundingClientRect().left-imagebin_position.left+1+"px"
})
.style('top', function(d,i){
return boxes[0][i].getBoundingClientRect().top+pageYOffset+1+"px"
})
.classed('tiny', true)
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment