Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Material Design - Transformation
<div class="wrapper">
<div class="content">
<div class="img"></div>
<div class="text">
<div class="line title"></div>
<div class="line subtitle"></div>
</div>
</div>
</div>
$(function() {
$('.wrapper').click(function() {
$('.content').toggleClass('open');
$(this).toggleClass('open');
})
})
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
body {
background: #eee;
}
.wrapper {
margin-top: 60px;
width: 109px;
height: 109px;
cursor: pointer;
position: absolute;
border-radius: 3px;
left: 50%;
top: 50%;
overflow: hidden;
transform: translate(-50%, -50%);
transition-timing-function: cubic-bezier(0.4, 0.0, 0.2, 1);
transition: transform 375ms, width 275ms 100ms, height 375ms;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
}
.wrapper.open {
transform: translate(-50%, -70%);
width: 330px;
height: 330px;
transition: transform 375ms, width 375ms, height 275ms 100ms;
}
div.content {
position: absolute;
margin: auto;
left: -9999px;
right: -9999px;
transform-origin: top;
width: 330px;
transform: scale(0.62);
height: 330px;
border-radius: 3px;
background: #fff;
overflow: hidden;
transition: transform 375ms cubic-bezier(0.4, 0.0, 0.2, 1);
}
.content.open {
transform: scale(1);
}
.img {
height: 180px;
background-image: url("https://images.unsplash.com/reserve/E5CwLOxQSFimIXJurfpq_IMG_6424%20(1).jpg?dpr=2&auto=format&crop=entropy&fit=crop&w=1500&h=1000&q=80&cs=tinysrgb");
background-size: cover;
background-position: center;
}
.text {
padding: 30px;
}
.text .line {
height: 13px;
background: #eee;
margin-top: 20px;
}
.title {
width: 80%;
}
.subtitle {
width: 60%;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.