<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html><html lang='en' class=''>
<head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/michaelrappaz/pen/OOVXQB" />
<style class="cp-pen-styles">@import url("https://fonts.googleapis.com/css?family=Ubuntu:300,700");
.fontTitle, h1, .credit p {
font-family: Ubuntu, sans-serif;
letter-spacing: 10px;
text-transform: uppercase;
}
body {
background: linear-gradient(to right, #dae2f8, #d6a4a4);
}
h1 {
font-weight: 300;
text-align: center;
color: black;
}
.credit {
position: relative;
top: 30px;
}
.credit p {
font-size: 10px;
font-weight: 800;
text-align: center;
}
.credit a {
transition: all 200ms ease-in-out;
}
.credit a:link,
.credit a:visited,
.credit a:hover,
.credit a:active {
text-decoration: none;
color: black;
}
.credit a:hover {
color: #ff69b4;
}
* {
padding: 0;
margin: 0;
}
.img_container {
position: relative;
left: 50vw;
top: 50vh;
transform: translate(-50%, -50%);
box-shadow: 10px 10px 32px -8px rgba(0, 0, 0, 0.5);
width: 360px;
height: 200px;
transition: all 250ms ease-in-out;
}
.img_container:hover {
transform: translate(-50%, -50%) scale(1.1, 1.1);
}
.img_container .xray_box {
background: white;
position: absolute;
width: 100%;
height: 100%;
transform: scale(0, 1);
transform-origin: left;
}
.img_container img {
width: 360px;
height: 200px;
}
.box_in {
animation: hover 350ms ease-in-out forwards;
}
.box_out {
animation: new_hover 350ms ease-in-out forwards;
}
@keyframes new_hover {
0% {
transform: scale(0, 1);
transform-origin: right;
}
50% {
transform: scale(1, 1);
transform-origin: right;
}
55% {
transform: scale(1, 1);
transform-origin: left;
}
100% {
transform: scale(0, 1);
transform-origin: left;
}
}
@keyframes hover {
0% {
transform: scale(0, 1);
transform-origin: left;
}
50% {
transform: scale(1, 1);
transform-origin: left;
}
55% {
transform: scale(1, 1);
transform-origin: right;
}
100% {
transform: scale(0, 1);
transform-origin: right;
}
}
</style></head><body>
<div class="credit">
<h1>hover box x-ray</h1>
<p> <a href="https://twitter.com/MichaelRappaz" target="_blank">Made by Michael</a></p>
</div>
<!-- End of Template-->
<div class="img_container">
<div class="xray_box"></div><img src="https://beta.michaelrappaz.com/img/parallax.png"/>
</div>
<script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
<script >$(".img_container").mouseover(function() {
$(".xray_box").removeClass("box_out");
$(".xray_box").addClass("box_in");
setTimeout(function() {
$("img").attr("src", "https://beta.michaelrappaz.com/img/xray.png");
}, 175); //delay has to be EXACTLY half the animation time so that the img change stays invisible
});
$(".img_container").mouseout(function() {
$(".xray_box").removeClass("box_in");
$(".xray_box").addClass("box_out");
setTimeout(function() {
$("img").attr("src", "https://beta.michaelrappaz.com/img/parallax.png");
}, 175); //delay has to be EXACTLY half the animation time so that the img change stays invisible
});
//# sourceURL=pen.js
</script>
</body></html>
