"hover effect"
Bootstrap 4.1.1 Snippet by muhamadsobari198

<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="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html><html class=''> <head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/elansz/pen/vLPejZ?limit=all&page=5&q=sms" /> <style class="cp-pen-styles">* { -webkit-transition: all 600ms cubic-bezier(0.165, 0.84, 0.44, 1); transition: all 600ms cubic-bezier(0.165, 0.84, 0.44, 1); } #animationcontainer div { -webkit-box-shadow: 0px 0px 74px 0px rgba(0,0,0,0.48); -moz-box-shadow: 0px 0px 74px 0px rgba(0,0,0,0.48); box-shadow: 0px 0px 74px 0px rgba(0,0,0,0.48); } #animationcontainer { width:600px; height:400px; background:white; position:relative; -webkit-perspective: 3000px; -webkit-perspective-origin: center center; perspective: 3000px; perspective-origin: center center; -moz-perspective: 3000px; -moz-perspective-origin: center center; } #coverclick { width:140px; height:145px; background-size:cover; position:absolute; margin-left:-70px; border-radius:5px; left:50%; top:50%; margin-top:-72.5px; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; transform-style: preserve-3d; transform-origin: 70px 0; -ms-transform-origin:70px 0; -moz-transform-origin: 70px 0; -webkit-transform-origin: 70px 0; -webkit-transition: all 600ms cubic-bezier(0.39, 0.575, 0.565, 1); transition: all 600ms cubic-bezier(0.39, 0.575, 0.565, 1); -webkit-animation-name: cover; -webkit-animation-duration: 5s; animation-name: cover; animation-duration: 5s; animation-iteration-count: 1; animation-timing-function: ease-in-out; -webkit-animation-timing-function: ease-in-out; opacity:0; } #coverfront { background-image:url('https://s3.amazonaws.com/starfleetmedia/PMS+cover.png'); width:140px; height:145px; background-size:cover; position:absolute; margin:0; } #coverback { -webkit-transform: rotateY(180deg); -moz-transform: rotateY(180deg); -ms-transform: rotateY(180deg); transform: rotateY(180deg); position:absolute; margin:0; background:red; } #growcircle { height:40px; width:40px; background:transparent; border: 2px solid #2FA3D8; border-radius:50%; position:absolute; left:50%; margin-left:-22px; top:50%; margin-top:-22px; -webkit-animation-name: grow; -webkit-animation-duration: 6s; animation-name: grow; animation-duration: 6s; animation-iteration-count: infinite; animation-timing-function: ease-in-out; -webkit-animation-timing-function: ease-in-out; box-shadow:none; !important -moz-box-shadow:none; !important -webkit-box-shadow:none; !important } @keyframes grow { 0% {width:40px;height:40px;margin-left:-22px;margin-top:-22px;} 25% {width:80px;height:80px;margin-left:-42px;margin-top:-42px;} 50% {width:60px;height:60px;margin-left:-32px;margin-top:-32px;} 75% {width:80px;height:80px;margin-left:-42px;margin-top:-42px;opacity:0.5;} 100% {width:40px;height:40px;margin-left:-22px;margin-top:-22px;} } @keyframes cover { 0% {opacity:1;} 100% { transform: rotateY(-160deg); -webkit-transform: rotateY(-160deg); -moz-transform: rotateY(-160deg); -ms-transform: rotateY(-160deg); transform-style: preserve-3d; -webkit-transform-style: preserve-3d; opacity:0;} } #cover1 { position:absolute; width: 140px; height: 145px; background-image:url('https://s3.amazonaws.com/starfleetmedia/1.png'); background-size:cover; animation-name: cover1; animation-duration: 3s; animation-iteration-count: 1; transform: scale(1.5) rotateY(-10deg) rotateX(10deg); margin-left:110px; margin-top:50px;opacity:0.8; } @keyframes cover1 { 0%,75%{ transform: rotateY(-5deg) rotateX(15deg); margin-left:200px; margin-top:50px;opacity:0; } 100%{transform: scale(1.5) rotateY(-10deg) rotateX(10deg); margin-left:110px; margin-top:50px;opacity:0.8; } } #cover2 { position:absolute; width: 140px; height: 145px; background-image:url('https://s3.amazonaws.com/starfleetmedia/2.png'); background-size:cover; animation-name: cover2; animation-duration: 3s; animation-iteration-count: 1; transform: scale(1.2) rotateY(10deg) rotateX(10deg); margin-left:290px; margin-top:70px; opacity:0.8; } @keyframes cover2 { 0%,75% {transform: rotateY(5deg) rotateX(20deg); margin-left:270px; margin-top:70px;opacity:0;} 100%{ transform: scale(1.2) rotateY(10deg) rotateX(10deg); margin-left:290px; margin-top:70px;opacity:0.8;} } #cover3 { position:absolute; width: 140px; height: 145px; background-image:url('https://s3.amazonaws.com/starfleetmedia/3.png'); background-size:cover; animation-name: cover3; animation-duration: 3s; animation-iteration-count: 1; transform: scale(1.4) rotateY(-8deg) rotateX(-10deg); margin-left:160px; margin-top:160px; opacity:0.8; } @keyframes cover3 { 0%,75%{ transform: rotateY(-2deg) rotateX(10deg); margin-left:230px; margin-top:100px; opacity:0;} 100%{ transform: scale(1.4) rotateY(-8deg) rotateX(-10deg); margin-left:160px; margin-top:160px;opacity:0.8;} } #cover4 { position:absolute; width: 140px; height: 145px; transform: scale(1.3) rotateY(10deg) rotateX(-8deg); margin-left:380px; margin-top:200px; background-image:url('https://s3.amazonaws.com/starfleetmedia/4.png'); background-size:cover; animation-name: cover4; animation-duration: 3s; animation-iteration-count: 1; opacity:0.8; } @keyframes cover4 { 0%,75%{ margin-left:260px; margin-top:160px; transform: rotateY(5deg) rotateX(-4deg); opacity:0; } 100%{transform: scale(1.3) rotateY(10deg) rotateX(-8deg); margin-left:380px; margin-top:200px; opacity:0.8;} } #cover5 { position:absolute; width: 140px; height: 145px; background-image:url('https://s3.amazonaws.com/starfleetmedia/5.png'); background-size:cover; animation-name: cover5; animation-duration: 3s; animation-iteration-count: 1; transform: scale(0.8) rotateY(10deg) rotateX(4deg); margin-left:360px; margin-top:135px;opacity:0.8; } @keyframes cover5 { 0%,75%{ transform: rotateY(4deg) rotateX(10deg); margin-left:200px; margin-top:100px;opacity:0; } 100%{transform: scale(0.8) rotateY(10deg) rotateX(4deg); margin-left:360px; margin-top:135px;opacity:0.8; } } #cover6 { position:absolute; width: 140px; height: 145px; background-image:url('https://s3.amazonaws.com/starfleetmedia/6.png'); background-size:cover; animation-name: cover6; animation-duration: 3s; animation-iteration-count: 1; transform: scale(0.7) rotateY(-6deg) rotateX(-10deg); margin-left:90px; margin-top:170px;opacity:0.8; } @keyframes cover6 { 0%,75%{ transform: rotateY(-3deg) rotateX(-5deg); margin-left:200px; margin-top:100px;opacity:0; } 100%{transform: scale(0.7) rotateY(-6deg) rotateX(-10deg); margin-left:90px; margin-top:170px;opacity:0.8; } } #cover1:hover { opacity:1; !important -webkit-box-shadow: 0px 0px 74px 0px rgba(0,0,0,0.8); -moz-box-shadow: 0px 0px 74px 0px rgba(0,0,0,0.8); box-shadow: 0px 0px 74px 0px rgba(0,0,0,0.8); } #cover2:hover { opacity:1; !important -webkit-box-shadow: 0px 0px 74px 0px rgba(0,0,0,0.8); -moz-box-shadow: 0px 0px 74px 0px rgba(0,0,0,0.8); box-shadow: 0px 0px 74px 0px rgba(0,0,0,0.8); } #cover3:hover { opacity:1; !important -webkit-box-shadow: 0px 0px 74px 0px rgba(0,0,0,0.8); -moz-box-shadow: 0px 0px 74px 0px rgba(0,0,0,0.8); box-shadow: 0px 0px 74px 0px rgba(0,0,0,0.8); } #cover4:hover { opacity:1; !important -webkit-box-shadow: 0px 0px 74px 0px rgba(0,0,0,0.8); -moz-box-shadow: 0px 0px 74px 0px rgba(0,0,0,0.8); box-shadow: 0px 0px 74px 0px rgba(0,0,0,0.8); } #cover5:hover { opacity:1; !important -webkit-box-shadow: 0px 0px 74px 0px rgba(0,0,0,0.8); -moz-box-shadow: 0px 0px 74px 0px rgba(0,0,0,0.8); box-shadow: 0px 0px 74px 0px rgba(0,0,0,0.8); } #cover6:hover { opacity:1; !important -webkit-box-shadow: 0px 0px 74px 0px rgba(0,0,0,0.8); -moz-box-shadow: 0px 0px 74px 0px rgba(0,0,0,0.8); box-shadow: 0px 0px 74px 0px rgba(0,0,0,0.8); }</style></head><body> <div id="animationcontainer"> <div id="growcircle"></div> <div id="coverclick"> <figure id="coverfront"></figure> <figure id="coverback"></figure> </div> <div id="cover1" class="acover"> </div> <div id="cover3" class="acover"> </div> <div id="cover4" class="acover"> </div> <div id="cover2" class="acover"> </div> <div id="cover5" class="acover"> </div> <div id="cover6" class="acover"> </div> </div> <script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script><script src='//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js'></script><script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> </body></html>

Related: See More


Questions / Comments: