<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <div class="col-md-4"> <div class="parent-div"> <img src="http://placehold.it/360x300" class="img-responsive"> <div class="wave-area"> <div class="wave wave-1"></div> <div class="wave wave-2"></div> <div class="wave wave-3"></div> </div> <a class="play-btn" href="https://www.youtube.com/embed/7e90gBu4pas?autoplay=1"><i class="fa fa-play"></i></a> </div> </div> </div> </div>

.parent-div { width: 100%; background: #252525; } .play-btn { position: absolute; background-color: #ffffff; border-radius: 50%; color: #ffbd34; display: inline-block; font-size: 30px; height: 60px; line-height: 59px; text-align: center; width: 60px; z-index: 2; padding-left: 6px; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .play-btn .fa{ font-size: 24px; } .play-btn:hover { box-shadow: 0 0 2px 5px rgba(255, 255, 255, 0.3); background: #ffbd34; color: #fff; } .wave-area{ position: absolute; width: 180px; height: 180px; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); z-index: 2; } .wave-area .wave { position: absolute; width: 180px; height: 180px; background: rgba(255, 255, 255, 0.2); opacity: 0; border-radius: 50%; background-clip: padding-box; -webkit-animation: wave 3s ease-in-out infinite; animation: wave 3s ease-in-out infinite; } .wave-area .wave-1 { -webkit-animation-delay: 0s; animation-delay: 0s; } .wave-area .wave-2 { -webkit-animation-delay: 1s; animation-delay: 1s; } .wave-area .wave-3 { -webkit-animation-delay: 2s; animation-delay: 2s; } @-webkit-keyframes wave { 0% { -webkit-transform: scale(0.2, 0.2); transform: scale(0.2, 0.2); opacity: 0; } 50% { opacity: 0.9; } 100% { -webkit-transform: scale(0.9, 0.9); transform: scale(0.9, 0.9); opacity: 0; } } @keyframes wave { 0% { -webkit-transform: scale(0.2, 0.2); transform: scale(0.2, 0.2); opacity: 0; } 50% { opacity: 0.9; } 100% { -webkit-transform: scale(0.9, 0.9); transform: scale(0.9, 0.9); opacity: 0; } }