CSS Section:
<style>
.card {
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
transition: 0.3s;
width: 100%;
}
.card:hover {
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}
</style>
HTML Section:
<div class="card">
<img src="https://blogger.googleusercontent.com/img/a/AVvXsEhBWplK6xenUfr2YC9NmhSTZyd01xUjlidCd8Y2hrCRnHgq-3H26JN8dUq-lLG63QV7A4RYXeOMKY-V0GzY_qjN3Lw9Z5WhO7469W7S1nKESZ4hq29Qo72qYLMKQsr-TbnDTupPQRGTLM1jzut39qPsgAYglYmg8ezMmHnoi8AHNemHUKn587eke8q9=s400" alt="Avatar" style="width:100%;" />
<div style="background:linear-gradient(to right, #00ccff 0%, #99ff99 100%);color: #fff;text-align: center;padding: 5px;font-weight: 600;"><a href="#">Sign up !</a></div>
</div>
css-tricks,web-development