"Heart Beat"
Bootstrap 4.1.1 Snippet by xBootstrap.com

Post to Facebook Tweet this

<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 ----------> <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"> <body> <!--Main Wrapper--> <div id="Wrapper"> <h1>Heart Beat</h1> <!--Image Gallery Begins--> <div id="Images"> <ul> <li><a href="https://www.xbootstrap.com/"><span class="fa fa-heart" style="font-size:200px; color: #ff6666 !important;"></span></a></li> </ul> <!--Image Gallery Ends--> </div> </div> </body> </html>
/****************************** Body ******************************/ body{ background:#fff; } /****************************** Wrapper ******************************/ #Wrapper{ margin:0 auto; width:1000px; margin-top:30px; } #Wrapper h1{ font-family:"Bitter"; text-align:left; font-weight: bold; color:#333; margin-bottom:30px; } /****************************** Image Gallery ******************************/ #Images ul li{ float:left; list-style:none; opacity:0.6; -webkit-animation: scale 3s ease-in-out infinite alternate; } #Images ul li:hover{ opacity:1.0; } /****************************** Animations ******************************/ @-webkit-keyframes scale { 0% { } 100% { -webkit-transform: scale(1.2); } }

Related: See More

Argon Design System
Functional Heart Ratings

Questions / Comments: