<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<div class="row">
<div class="card" tabindex="0">
<span class="card__infoicon">
<i class="fa fa-info"></i>
</span>
<h1 class="card__title">This is a title</h1>
<p class="card__description">Lorem ipsum dolor sit amet and this is all the lorem ipsum text I remember</p>
</div>
</div>
</div>
body {
display: grid;
place-content: center;
align-items: center;
font-family: "nunito", sans-serif;
background-color: #0099ff;
}
.card {
position: absolute;
background-color: #0099ff;
position: relative;
padding: 42px 32px;
clip-path: circle(5% at 95% 13%);
transition: all ease-in-out 0.3s;
background-color: #ffffff;
top: 20%;
position: absolute;
}
.card__infoicon {
position: absolute;
top: 10px;
right: 28px;
font-size: 1.4em;
color: #000000;
transition: ease-out 0.3s;
}
.card__title {
margin: 0;
font-size: 3em;
line-height: 1.8;
}
.card__description {
margin: 0;
font-size: 1.1em;
line-height: 1.6;
}
.card__credits {
margin: 0;
padding: 4px 0;
font-size: 1.1em;
}
.card__reference {
display: inline-block;
border-bottom: 1px solid transparent;
color: #0099ff;
text-decoration: none;
transition: ease-in 0.3s;
}
.card__reference:hover {
border-bottom-color: #0099ff;
}
.card:hover, .card:focus {
clip-path: circle(75%);
border-radius: 20px;
box-shadow: 0px 3px 9px rgba(0, 0, 0, 0.12), 0px 3px 18px rgba(0, 0, 0, 0.08);
background: #ffffff;
outline: none;
}
.card:hover .card__infoicon, .card:focus .card__infoicon {
opacity: 0;
}
.card:focus {
box-shadow: 0px 3px 9px rgba(0, 0, 0, 0.12), 0px 3px 18px rgba(0, 0, 0, 0.08), 0px 0px 0px 4px rgba(0, 0, 0, 0.2);
}
