<div class="container">
<div class="profile">
<div class="image"></div>
<h2>Sarah Jane</h2>
<p>20-year-old part time photograpger who enjoys binge-watching boxed sets, watching sport and hockey. She is intelligent and careful, but can also be a bit grumpy.</p>
</div>
</div>
$body: #09000b;
$nunito: "Nunito", sans-serif;
$dark: #0a0a0a;
body {
background-color: $body;
font-family: $nunito;
}
.container {
padding: 100px 0;
}
.profile {
max-width: 300px;
margin: 0 auto;
background-color: #ffffff;
padding: 30px;
border-radius: 10px;
position: relative;
h2 {
color: $dark;
}
p {
color: rgba($dark, 0.8)
}
.image {
width: 75px;
height: 75px;
background: red;
border-radius: 50%;
margin: 0 auto;
position: absolute;
right: 15px;
top: 15px;
transform-origin: bottom left;
box-shadow: 0 3px 15px rgba($dark, 0.1);
transition: all 0.3s ease-in-out;
background-image: url("https://images.unsplash.com/photo-1479936343636-73cdc5aae0c3?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=200&q=80");
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
}
&:hover {
.image {
transform: scale(1.5);
border-radius: 10px;
}
}
}
View Compiled
This Pen doesn't use any external JavaScript resources.