"Image-hover-effect mk2207"
Bootstrap 4.1.1 Snippet by Milind_Kamthe

<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"> <h2 class="mk">Image Hover Effects</h2> </div> </div> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body> <section class="wrapper-full tab-container effectTab-header" id="style_1" style="padding-top:170px;"> <div class="wrapper tab-item"> <div class="custom-row"> <div class="wrapper " align="center"> <h1 class="ti title">Hover Effect 1</h1> </div> <div class="column-12 column-xs-12 column-sm-12 tab"> <div class="custom-row"> <div class="column-8 column-md-6 hide-xs hide-sm hide-md box-tab"> <div class="effect grid-width8 effect-one"> <img src="https://images.unsplash.com/photo-1518791841217-8f162f1e1131?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80" class="img-fluid"> <div class="tab-text"> <h2 class="pt-1">grid column 8</h2> <p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.</p> <div class="icons-block"> <a href="#" class="social-icon-1"><i class="fa fa-facebook-official"></i></a> <a href="#" class="social-icon-2"><i class="fa fa-twitter-square"></i></a> <a href="#" class="social-icon-3"><i class="fa fa-youtube-square"></i></a> </div> </div> </div> </div> </div> </div> </div> </div> </section> <section class="wrapper-full tab-container effectTab-header" id="style_6"> <div class="wrapper tab-item"> <div class="custom-row"> <div class="wrapper " align="center"> <h1 class="ti title">hover effects 2</h1> </div> <div class="column-12 column-xs-12 tab"> <div class="custom-row"> <div class="column-12 hide-xs hide-sm box-tab hide-md"> <div class="effect grid-width3 effect-six"> <img src="https://images.unsplash.com/photo-1518791841217-8f162f1e1131?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80" class="img-fluid"> <div class="tab-text"> <h2>column 3</h2> <p>training projects</p> <div class="icons-block"> <a href="#" class="social-icon-1"><i class="fa fa-facebook-official"></i></a> <a href="#" class="social-icon-2"><i class="fa fa-twitter-square"></i></a> <a href="#" class="social-icon-3"><i class="fa fa-youtube-square"></i></a> </div> </div> </div> </div> </div> </div> </div> </div> </section> <section class="wrapper-full tab-container effectTab-header" id="style_9"> <div class="wrapper tab-item"> <div class="custom-row"> <div class="wrapper" align="center"> <h1 class="ti title">hover effects 9</h1> </div> <div class="column-12 column-xs-12 tab"> <div class="custom-row"> <div class="column-12 box-tab"> <div class="effect effect-nine"> <img src="https://images.unsplash.com/photo-1518791841217-8f162f1e1131?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80" class="img-fluid"> <div class="tab-text"> <h2>Three column 4</h2> <p>poppins Design for smart design.</p> <div class="icons-block"> <a href="#" class="social-icon-1"><i class="fa fa-facebook-official"></i></a> <a href="#" class="social-icon-2"><i class="fa fa-twitter-square"></i></a> <a href="#" class="social-icon-3"><i class="fa fa-youtube-square"></i></a> </div> </div> </div> </div> </div> </div> </div> </div> </section> <section class="wrapper-full tab-container effectTab-header" id="style_10"> <div class="wrapper tab-item"> <div class="custom-row"> <div class="wrapper " align="center"> <h1 class="ti title">hover effects 10</h1> </div> <div class="column-12 column-xs-12 tab"> <div class="custom-row"> <div class="column-8 hide-xs hide-sm hide-md box-tab"> <div class="effect grid-width8 effect-ten"> <img src="https://images.unsplash.com/photo-1518791841217-8f162f1e1131?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80" class="img-fluid"> <div class="tab-text"> <h2 class="col8-head">grid column 8</h2> <p>Era of modern design and advanced transitions </p> <div class="icons-block"> <a href="#" class="social-icon-1"><i class="fa fa-facebook-official"></i></a> <a href="#" class="social-icon-2"><i class="fa fa-twitter-square"></i></a> <a href="#" class="social-icon-3"><i class="fa fa-youtube-square"></i></a> </div> </div> </div> </div> </div> </div> </div> </div> </section> <section class="wrapper-full tab-container effectTab-header" id="style_11"> <div class="wrapper tab-item"> <div class="custom-row"> <div class="wrapper " align="center"> <h1 class="ti title">hover effects 11</h1> </div> <div class="column-12 column-xs-12 tab"> <div class="custom-row"> <div class="column-6 column-xs-12 column-sm-6 column-md-6 box-tab"> <div class="effect effect-eleven"> <img src="https://images.unsplash.com/photo-1518791841217-8f162f1e1131?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80" class="img-fluid"> <div class="tab-text"> <h2>Three column 4</h2> <p>poppins Design for smart design.</p> <div class="icons-block"> <a href="#" class="social-icon-1"><i class="fa fa-facebook-official"></i></a> <a href="#" class="social-icon-2"><i class="fa fa-twitter-square"></i></a> <a href="#" class="social-icon-3"><i class="fa fa-youtube-square"></i></a> </div> </div> </div> </div> </div> </div> </div> </div> </section> <section class="wrapper-full tab-container effectTab-header" id="style_12"> <div class="wrapper tab-item"> <div class="custom-row"> <div class="wrapper " align="center"> <h1 class="ti title">hover effects 12</h1> </div> <div class="column-12 column-xs-12 tab"> <div class="custom-row"> <div class="column-4 column-xs-12 column-sm-6 column-md-6 box-tab hide visible-sm visible-md"> <div class="effect effect-twelve"> <img src="https://images.unsplash.com/photo-1518791841217-8f162f1e1131?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80" class="img-fluid"> <div class="tab-text"> <h2>Three column 4</h2> <p>poppins Design for smart design.</p> <div class="icons-block"> <a href="#" class="social-icon-1"><i class="fa fa-facebook-official"></i></a> <a href="#" class="social-icon-2"><i class="fa fa-twitter-square"></i></a> <a href="#" class="social-icon-3"><i class="fa fa-youtube-square"></i></a> </div> </div> </div> </div> <div class="column-8 hide-xs hide-sm hide-md box-tab"> <div class="effect grid-width3 effect-twelve"> <img src="https://images.unsplash.com/photo-1518791841217-8f162f1e1131?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80" class="img-fluid"> <div class="tab-text"> <h2>column 3</h2> <p>online program</p> <div class="icons-block"> <a href="#" class="social-icon-1"><i class="fa fa-facebook-official"></i></a> <a href="#" class="social-icon-2"><i class="fa fa-twitter-square"></i></a> <a href="#" class="social-icon-3"><i class="fa fa-youtube-square"></i></a> </div> </div> </div> </div> </div> </div> </div> </div> </section> </body> </html>
.mk{text-align:center;margin:0 auto;background:blue;color:#fff;padding:5px 15px;border-radius:15px;} .menu, .nav-icon span { transition: all .3s ease-in-out } .menu .nav-menu li a, .nav-menu li a { line-height: 56px } *, ::after, ::before { margin: 0; padding: 0; box-sizing: border-box } .effectTab-header .caption, .effectTab-header .title { font-weight: 700; padding-bottom: 20px; position: relative; display: inline-block; color: #555; margin: 0 0 20px; text-align: center; text-transform: uppercase } .effectTab-header .title { font-size: 36px; font-family: Oswald, sans-serif } .effectTab-header .caption { font-size: 30px; font-family: 'Open Sans', sans-serif } .effectTab-header .title::after, .effectTab-header .title::before { position: absolute; background: linear-gradient(to right, #ed6ea0 0, #ec8c69 100%); content: "" } .effectTab-header .title::before { left: 0; width: 156%; height: 3px; margin-left: -28%; bottom: -1.5px } .effectTab-header .title::after { left: 50%; width: 25px; height: 25px; bottom: -26px; margin: 0 0 0 -10px; -webkit-clip-path: polygon(75% 0, 75% 69%, 41% 93%, 0 68%, 0 0); clip-path: polygon(75% 0, 75% 69%, 41% 93%, 0 68%, 0 0) } body { background-color: #F5F5F5; } .nav-icon, .navigation { float: right } .custom-row::after { content: ""; display: table; clear: both } .wrapper { max-width: 1140px; margin: 0 auto; position: relative } .header { background-color: #485666; padding: 8px 0; position: static; z-index: 2000 } .header h1 { color: #fff; font-family: Poppins; font-weight: 400; font-size: 2.2rem; padding-left: 40px } .rotate { position: absolute; transform: rotate(-20deg); left: 0; font-size: 2.8rem; top: 5px } .ex_padd { padding-top: 170px!important } .nav-icon-container { display: block } .nav-icon { width: 50px; height: 50px; border: 2px solid #fff; border-radius: 50%; position: relative; cursor: pointer; z-index: 100 } .nav-icon span { width: 60%; height: 2px; background-color: #fff; position: absolute; left: 50%; transform: translate(-50%, -50%) } .nav-icon-1 { top: 30% } .nav-icon-2 { top: 50% } .nav-icon-3 { top: 70% } .nav-icon.active .nav-icon-1 { top: 50%; transform: rotate(45deg); left: 22% } .nav-icon.active .nav-icon-3 { top: 50%; transform: rotate(-45deg); left: 22% } .nav-icon.active .nav-icon-2 { width: 0 } .nav-menu { display: flex; flex-direction: row; justify-content: space-around } .nav-menu li { list-style: none; position: relative } .nav-menu li a { color: #fff; text-decoration: none; display: inline-block; padding: 0 20px } .nav-menu li:after, .nav-menu li:before { content: ""; position: absolute; height: 3px; background-color: rgba(255, 255, 255, .2); bottom: 0; width: 0; transition: all .3s ease-in-out } .nav-menu li:before { left: 0 } .nav-menu li:after { right: 0 } .nav-menu li:hover:after, .nav-menu li:hover:before { width: 50% } .nav-menu li.active:after, .nav-menu li.active:before { background-color: rgba(0, 128, 128, 1) } .menu { width: 200px; background-color: #0B466C; text-align: center; padding: 40px; position: fixed; top: 96px; right: -200px; overflow: scroll; height: calc(100% - 96px); z-index: 1000 } .menu.active { right: 0 } .menu .nav-menu { flex-direction: column; width: 150px } .menu .nav-menu li { margin: 10px 0; width: 80% } .box-tab { margin: 10px 0 } .effect { margin: auto; box-shadow: 0 0 15px 5px rgba(0, 0, 0, .07); background-color: #fff; border: 5px solid #f5f5f5 } .tab-container { padding: 50px 0 } .tab-head { text-align: center; padding-bottom: 10px; margin-bottom: 20px; margin-left: auto; margin-right: auto } .tab .effect { position: relative; overflow: hidden; max-height: 240px; max-width: 350px; background: #3085a3; text-align: center; cursor: pointer } .grid-width3, .grid-width6 { max-height: 270px!important; max-width: 530px!important } .grid-width8 { max-width: 700px!important } .tab .effect img { position: relative; display: block; min-height: 100%; opacity: .8 } .tab .effect .tab-text { padding: 2em; color: #fff; text-transform: uppercase; font-size: 1.25rem; -webkit-backface-visibility: hidden; backface-visibility: hidden; position: absolute; top: 0; left: 0; width: 100%; height: 100% } .tab-text h2 { color: #fff; margin: 0; font-size: 1.5rem } .tab-text p { color: #fff; margin: 0; font-size: 1rem } .hide { display: none } .effect.effect-one { background: #18a367; position: relative } .effect.effect-one .tab-text { padding: 1em } .effect.effect-one .tab-text::after, .effect.effect-one .tab-text::before { position: absolute; content: ''; opacity: 0 } .effect.effect-one .tab-text::before { top: 50px; right: 30px; bottom: 50px; left: 30px; border-top: 2px solid rgba(255, 255, 255, .3); border-bottom: 2px solid rgba(255, 255, 255, .3); -webkit-transform: scale(0, 1); transform: scale(0, 1); -webkit-transform-origin: 0 0; transform-origin: 0 0 } .effect.effect-one .tab-text::after { top: 30px; right: 50px; bottom: 30px; left: 50px; border-right: 1px solid #fff; border-left: 1px solid #fff; -webkit-transform: scale(1, 0); transform: scale(1, 0); -webkit-transform-origin: 100% 0; transform-origin: 100% 0 } .effect.effect-one .icons-block { z-index: 1000; position: absolute; bottom: 14px; width: 100%; left: 0; text-align: center } .effect.effect-one .icons-block .social-icon-1, .effect.effect-one .icons-block .social-icon-2, .effect.effect-one .icons-block .social-icon-3 { transition: all .5s ease-in-out; opacity: 0 } .effect.effect-one:hover .social-icon-1 { opacity: 1; transition-delay: .3s; transition-duration: .5s } .effect.effect-one:hover .social-icon-2 { opacity: 1; transition-delay: .4s; transition-duration: .5s } .effect.effect-one:hover .social-icon-3 { opacity: 1; transition-delay: .5s; transition-duration: .5s } .effect.effect-one .icons-block i { color: rgba(255, 255, 255, 1); padding-left: 10px; font-size: 1.3rem } .effect.effect-one h2 { padding-top: 20%; -webkit-transition: -webkit-transform .35s; transition: transform .35s; font-weight: 600; font-size: 1.7rem; font-family: Oswald, sans-serif } .effect.effect-one p, .effect.effect-two h2, .effect.effect-two p.description { font-family: Poppins } .effect-one .pt-1 { padding-top: 10%!important } .effect-one .pt-2 { padding-top: 16%!important } .effect-one .pt-3 { padding-top: 28%!important } .effect.effect-one p { padding: .5em 2.7em; text-transform: none; opacity: 0; -webkit-transform: translate3d(0, -10px, 0); transform: translate3d(0, -10px, 0); font-size: .92rem; line-height: 16px; color: rgba(255, 255, 255, .9) } .effect.effect-one h2, .effect.effect-one img { -webkit-transform: translate3d(0, -30px, 0); transform: translate3d(0, -30px, 0) } .effect.effect-one .tab-text::after, .effect.effect-one .tab-text::before, .effect.effect-one img, .effect.effect-one p { -webkit-transition: opacity .35s, -webkit-transform .35s; transition: opacity .35s, transform .35s } .effect.effect-one:hover img { opacity: .7; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0) scale(1.1, 1.1) } .effect.effect-one:hover .tab-text::after, .effect.effect-one:hover .tab-text::before { opacity: 1; -webkit-transform: scale(1); transform: scale(1) } .effect.effect-one:hover h2, .effect.effect-one:hover p { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0) } .effect.effect-one:hover .tab-text::after, .effect.effect-one:hover h2, .effect.effect-one:hover img, .effect.effect-one:hover p { -webkit-transition-delay: .15s; transition-delay: .15s } .effect.effect-two .tab-text { top: auto; bottom: 0; padding: 1em; height: 3.75em; background: rgba(241, 169, 1, .95); color: #3c4a50; -webkit-transition: -webkit-transform .35s; transition: transform .35s; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0) } .effect.effect-two .col3 { height: 5.5rem!important } .effect.effect-two h2 { float: left; font-size: 1.1rem; font-weight: 600; word-break: break-all; width: 50%; text-align: left; display: inline-block } .effect-two .col3-head { width: 100%!important; padding-bottom: 10px } .effect-two .icon-links a { font-size: 1.2rem!important } .effect.effect-two p.icon-links a { float: right; color: #f1f8ff; font-size: 1.4em; line-height: 20px } .effect.effect-two:hover p.icon-links a:focus, .effect.effect-two:hover p.icon-links a:hover { color: #252d31 } .effect.effect-two p.description { position: absolute; font-size: 1rem!important; bottom: 7em; color: #fff; text-transform: none; opacity: 0; -webkit-backface-visibility: hidden; -webkit-transition: opacity .35s; transition: opacity .35s; line-height: 18px; padding: 15px 50px; background-color: rgba(0, 0, 0, .5); right: 30px; left: 30px; -webkit-clip-path: polygon(25% 0, 100% 0, 75% 100%, 0 100%); clip-path: polygon(7% 0, 100% 0, 93% 100%, 2% 100%) } .effect.effect-two p.col6 { left: 80px!important; right: 80px!important; bottom: 8rem } .effect.effect-two h2, .effect.effect-two p.icon-links a { -webkit-transition: -webkit-transform .35s; transition: transform .35s; -webkit-transform: translate3d(0, 200%, 0); transform: translate3d(0, 200%, 0) } .effect.effect-two:hover p.description { opacity: 1 } .effect.effect-two:hover .tab-text, .effect.effect-two:hover h2, .effect.effect-two:hover p.icon-links a { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); padding-right: 10px } .effect.effect-two:hover h2 { -webkit-transition-delay: 50ms; transition-delay: 50ms } .effect.effect-two:hover p.icon-links a:nth-child(3) { -webkit-transition-delay: .1s; transition-delay: .1s } .effect.effect-two:hover p.icon-links a:nth-child(2) { -webkit-transition-delay: .15s; transition-delay: .15s } .effect.effect-two:hover p.icon-links a:first-child { -webkit-transition-delay: .2s; transition-delay: .2s } .effect.effect-three { background: linear-gradient(-45deg, #0C71E9 0, #034B96, 100%); text-align: left } .effect.effect-three h2 { transform: translate3d(25px, 0, 0); -webkit-transform: translate3d(25px, 0, 0); transition: all .35s; font-family: Oswald; font-size: 1.6rem } .effect.effect-three h2:before { content: "[ "; position: absolute; left: -15px; bottom: 3px; font-weight: 400 } .effect.effect-three:hover h2 { transform: translate3d(0, 0, 0); -webkit-transform: translate3d(0, 0, 0); opacity: .5 } .effect.effect-three .tab-text:before { content: ""; position: absolute; bottom: 0; right: 0; border: 140px solid red; border-radius: 50% 0 0 50%; opacity: 0; transform: translate3d(50%, 50%, 0) rotate3d(0, 0, 1, 135deg); transition: all .35s .15s; border-color: transparent transparent transparent #fff } .effect.effect-three:hover .tab-text:before { transform: translate3d(50%, 50%, 0) rotate3d(0, 0, 1, 45deg); opacity: .8; transition-delay: 0s } .effect.effect-three p { position: absolute; width: 31px; height: 36px; bottom: 70px; right: -31px; font-size: 120% } .effect.effect-three p a { width: 31px; height: 36px; position: absolute; opacity: 0; transition: all .35s cubic-bezier(.25, .4, .2, .5) 0s } .effect.effect-three p a i { color: #5d504f; transition: transform .35s cubic-bezier(.5, .2, .4, .25) 0s } .effect.effect-three p a i:hover { color: #cc6055 } .effect.effect-three:hover p a { opacity: 1 } .effect.effect-three:hover p a:nth-child(1) { transform: translate3d(0, 60px, 0); -webkit-transform: translate3d(0, 60px, 0); transition: all .35s cubic-bezier(.5, .2, .4, .25) .15s; -webkit-transition: all .35s cubic-bezier(.5, .2, .4, .25) .15s } .effect.effect-three:hover p a:nth-child(1) i { transform: translate3d(-100px, 0, 0); transition: transform .35s cubic-bezier(.25, .4, .2, .5) .15s; -webkit-transform: translate3d(-100px, 0, 0); -webkit-transition: transform .35s cubic-bezier(.25, .4, .2, .5) .15s } .effect.effect-three:hover p a:nth-child(2) { transform: translate3d(0, 30px, 0); transition: all .35s cubic-bezier(.5, .2, .4, .25) .25s; -webkit-transform: translate3d(0, 30px, 0); -webkit-transition: all .35s cubic-bezier(.5, .2, .4, .25) .25s } .effect.effect-three:hover p a:nth-child(2) i { transform: translate3d(-80px, 0, 0); transition: transform .35s cubic-bezier(.25, .4, .2, .5) .25s; -webkit-transform: translate3d(-80px, 0, 0); -webkit-transition: transform .35s cubic-bezier(.25, .4, .2, .5) .25s } .effect.effect-three:hover p a:nth-child(3) { transform: translate3d(0, 0, 0); transition: all .35s cubic-bezier(.5, .2, .4, .25) .35s; -webkit-transform: translate3d(0, 0, 0); -webkit-transition: all .35s cubic-bezier(.5, .2, .4, .25) .35s } .effect.effect-three:hover p a:nth-child(3) i { transform: translate3d(-45px, 0, 0); transition: transform .35s cubic-bezier(.25, .4, .2, .5) .35s; -webkit-transform: translate3d(-45px, 0, 0); -webkit-transition: transform .35s cubic-bezier(.25, .4, .2, .5) .35s } .effect.effect-three img { transform: scale3d(1.1, 1.1, 1) translate3d(15px, 0, 0); transition: all .35s; transform-origin: 85% 100%; -webkit-transform: scale3d(1.1, 1.1, 1) translate3d(15px, 0, 0); -webkit-transition: all .35s; -webkit-transform-origin: 85% 100% } .effect.effect-three:hover img { transform: scale3d(1.1, 1.1, 1) translate3d(0, 0, 0); -webkit-transform: scale3d(1.1, 1.1, 1) translate3d(0, 0, 0); opacity: .6 } .effect.effect-four { background: #2e5d5a } .effect-four .tab-text h2 { position: absolute; left: 0; bottom: 0; padding: 1em 1.2em; font-family: Oswald } .effect-four .tab-text p { width: 65%; font-size: 68%; line-height: 1; letter-spacing: 1px; text-align: left; float: right; padding-left: 15px; border-left: 1px solid #fff; border-bottom: 1px solid #fff; transform: translate3d(40px, 0, 0); -webkit-transform: translate3d(40px, 0, 0); opacity: 0; transition: all .35s; font-family: "Open sans"; padding-bottom: 5px } .effect-four .tab-text p:after, .effect-four .tab-text p:before { width: 10px; height: 10px; background-color: rgba(255, 255, 255, 1); border-radius: 50px; content: ""; position: absolute } .effect.effect-five h2, .effect.effect-six h2 { font-family: Oswald } .effect-four .tab-text p:after { top: -5px; left: -5px; -webkit-clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%) } .effect-four .tab-text p:before { right: 0; bottom: -6px; -webkit-clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%) } .effect.effect-four .icons-block { z-index: 1000; position: absolute; top: 10px; width: 100%; left: 0; text-align: left; padding-left: 10px; padding-top: 9px } .effect.effect-four .icon-c3 { padding-left: 5px; padding-top: 0 } .effect.effect-four .icons-block .social-icon-1, .effect.effect-four .icons-block .social-icon-2, .effect.effect-four .icons-block .social-icon-3 { transition: all .5s ease-in-out; opacity: 0 } .effect.effect-four:hover .social-icon-1 { opacity: 1; transition-delay: .3s; transition-duration: .5s } .effect.effect-four:hover .social-icon-2 { opacity: 1; transition-delay: .4s; transition-duration: .5s } .effect.effect-four:hover .social-icon-3 { opacity: 1; transition-delay: .5s; transition-duration: .5s } .effect.effect-four .icons-block i { color: rgba(255, 255, 255, .9); padding-left: 7px; font-size: 1.2rem } .effect-four:hover p { transform: translate3d(0, 0, 0); opacity: 1 } .effect.effect-four img { max-width: none; width: calc(100% + 60px); opacity: 1; transform: translate3d(0, 0, 0) scale(1.12); transition: all .35s; -webkit-transform: translate3d(0, 0, 0) scale(1.12); -webkit-transition: all .35s } .effect.effect-four:hover img { transform: translate3d(-20px, 0, 0) scale(1); -webkit-transform: translate3d(-20px, 0, 0) scale(1); opacity: .5 } .effect.effect-five { background: #162633; text-align: left } .col3-block-height { min-height: 480px!important } .effect.effect-five h2 { transform: translate3d(0, 20px, 0); transition: all .35s; -webkit-transform: translate3d(0, 20px, 0); -webkit-transition: all .35s } .effect.effect-five:hover h2 { transform: translate3d(0, 0, 0); -webkit-transform: translate3d(0, 0, 0); opacity: .6 } .effect.effect-five img { transition: all .35s } .effect.effect-five:hover img { opacity: .6; transform: translate3d(0, 0, 0) scale(1.16); -webkit-transform: translate3d(0, 0, 0) scale(1.16) } .effect.effect-five .tab-text:before { content: ""; position: absolute; bottom: 0; left: 0; width: 100vw; height: 180%; background-color: #FFF; opacity: .8; transform-origin: 0 100%; transform: rotate(90deg); transition: all .35s; -webkit-transform-origin: 0 100%; -webkit-transform: rotate(90deg); -webkit-transition: all .35s } .effect.effect-seven .tab-text:after, .effect.effect-six .tab-text:before { height: 100%; left: 0; top: 0; position: absolute; width: 100%; content: "" } .effect.effect-five:hover .tab-text:before { transform: rotate(67deg); -webkit-transform: rotate(67deg) } .effect.effect-five p { position: absolute; bottom: 0; right: 0; padding: 0 15px 25px 0 } .effect.effect-five p a { color: #5d504f; margin: 0 5px } .effect.effect-five p a:hover { color: #cc6055 } .effect.effect-five p a i { opacity: 0; font-size: 120%; transform: translate3d(0, 50px, 0); transition: all .35s; -webkit-transform: translate3d(0, 50px, 0); -webkit-transition: all .35s } .effect.effect-five:hover p a i { opacity: 1; transform: translate3d(0, 0, 0); -webkit-transform: translate3d(0, 0, 0) } .effect.effect-five:hover p a:nth-child(1) i { transition-delay: .15s; -webkit-transition-delay: .15s } .effect.effect-five:hover p a:nth-child(2) i { transition-delay: .1s; -webkit-transition-delay: .1s } .effect.effect-five:hover p a:nth-child(3) i { transition-delay: .05s; -webkit-transition-delay: .05s } .effect.effect-six { background-color: #3498db } .effect.effect-six h2 { text-align: left } .effect.effect-six img { transition: all .35s; transform: translate3d(0, 0, 0) scale(1.05); -webkit-transition: all .35s; -webkit-transform: translate3d(0, 0, 0) scale(1.05) } .effect.effect-six:hover img { opacity: .4; transform: translate3d(-50px, 0, 0) scale(1); -webkit-transform: translate3d(-50px, 0, 0) scale(1) } .effect.effect-six .icons-block { z-index: 1000; position: absolute; bottom: 25px; width: 100%; left: 0; text-align: left; padding-left: 15px } .effect.effect-six .icons-block .social-icon-1, .effect.effect-six .icons-block .social-icon-2, .effect.effect-six .icons-block .social-icon-3 { transition: all .5s ease-in-out; opacity: 0 } .effect.effect-six:hover .social-icon-1 { opacity: 1; transition-delay: .3s; transition-duration: .5s } .effect.effect-six:hover .social-icon-2 { opacity: 1; transition-delay: .4s; transition-duration: .5s } .effect.effect-six:hover .social-icon-3 { opacity: 1; transition-delay: .5s; transition-duration: .5s } .effect.effect-six .icons-block i { color: rgba(255, 255, 255, 1); padding-left: 10px; font-size: 1.3rem } .effect.effect-six p { max-width: 130px; padding: 0 10px; margin: 30px; text-align: right; font-size: .9rem; line-height: 1.1; position: absolute; bottom: 0; right: 0; border-right: 3px solid #fff; opacity: 0; transition: all .35s; font-family: Poppins } .effect.effect-six:hover p { opacity: 1 } .effect.effect-six .tab-text:before { background-color: rgba(255, 255, 255, .4); transform: scale3d(1.9, 1.4, 1) rotate3d(0, 0, 1, 45deg) translate3d(0, -101%, 0); transition: all .6s; -webkit-transform: scale3d(1.9, 1.4, 1) rotate3d(0, 0, 1, 45deg) translate3d(0, -101%, 0); -webkit-transition: all .6s } .effect.effect-six:hover .tab-text:before { transform: scale3d(1.9, 1.4, 1) rotate3d(0, 0, 1, 45deg) translate3d(0, 101%, 0); -webkit-transform: scale3d(1.9, 1.4, 1) rotate3d(0, 0, 1, 45deg) translate3d(0, 101%, 0) } .effect.effect-seven { background: linear-gradient(-45deg, #f3cf3f 0, #f33f58 100%) } .effect.effect-eight, .effect.effect-nine { background: linear-gradient(-180deg, #fff 10%, #000 100%) } .effect.effect-seven img { transition: all .35s; transform: translate3d(0, 0, 0) scale(1); -webkit-transition: all .35s; -webkit-transform: translate3d(0, 0, 0) scale(1) } .effect.effect-seven:hover img { opacity: .6; transform: translate3d(-50px, 0, 0) scale(1.1) rotate(3deg); -webkit-transform: translate3d(-50px, 0, 0) scale(1.1) rotate(3deg) } .effect.effect-seven h2 { padding-top: 20%; transform: scale3d(.8, .8, 1); transition: all .35s; -webkit-transform: scale3d(.8, .8, 1); -webkit-transition: all .35s; font-family: Oswald } .effect.effect-seven .col8-head { padding-top: 9% } .effect.effect-seven:hover h2 { transform: scale3d(1, 1, 1); -webkit-transform: scale3d(1, 1, 1) } .effect.effect-seven p { font-size: .9rem; padding: 10px 5px; transform: scale3d(.8, .8, 1); -webkit-transform: scale3d(.8, .8, 1); opacity: 0; transition: all .35s; -webkit-transition: all .35s; font-family: Poppins } .effect.effect-seven:hover p { transform: scale3d(1, 1, 1); -webkit-transform: scale3d(1, 1, 1); opacity: 1 } .effect.effect-seven .tab-text:after { border-top: 1px solid #fff; border-bottom: 1px solid #fff; transform: rotate3d(0, 0, 1, 45deg) scale3d(1, 0, 1); -webkit-transform: rotate3d(0, 0, 1, 45deg) scale3d(1, 0, 1); opacity: 0; transition: all .35s; -webkit-transition: all .35s } .effect.effect-seven:hover .tab-text:after { transform: rotate3d(0, 0, 1, 45deg) scale3d(1, 1, 1); -webkit-transform: rotate3d(0, 0, 1, 45deg) scale3d(1, 1, 1); opacity: 1 } .effect.effect-seven .icons-block { z-index: 1000; position: absolute; bottom: 25px; width: 100%; left: 0; text-align: left; padding-left: 15px } .effect.effect-seven .c4 { right: 0; text-align: right; padding-right: 15px } .effect.effect-seven .c3 { bottom: 50%; margin-bottom: -40px; left: 23% } .effect.effect-seven .icons-block .social-icon-1, .effect.effect-seven .icons-block .social-icon-2, .effect.effect-seven .icons-block .social-icon-3 { transition: all .5s ease-in-out; opacity: 0 } .effect.effect-seven:hover .social-icon-1 { opacity: 1; transition-delay: .3s; transition-duration: .5s } .effect.effect-seven:hover .social-icon-2 { opacity: 1; transition-delay: .4s; transition-duration: .5s } .effect.effect-seven:hover .social-icon-3 { opacity: 1; transition-delay: .5s; transition-duration: .5s } .effect.effect-seven .icons-block i { color: rgba(255, 255, 255, 1); padding-left: 10px; font-size: 1.3rem } .effect.effect-eight img { transition: all .3s ease-in-out; transform: translate3d(0, 0, 0) scale(1, 1); -webkit-transition: all .3s ease-in-out; -webkit-transform: translate3d(0, 0, 0) scale(1, 1) } .effect.effect-eight:hover img { opacity: .6; transform: translate3d(-20px, 0, 0) scale(1.1, 1.1); -webkit-transform: translate3d(-20px, 0, 0) scale(1.1, 1.1) } .effect.effect-eight .tab-text h2 { font-family: Oswald; transform: scale3d(.9, .9, 1); transition: all .5s ease-in-out; -webkit-transform: scale3d(.9, .9, 1); -webkit-transition: all .5s ease-in-out } .effect.effect-eight .col8-head { padding-top: 9% } .effect.effect-eight:hover h2 { transform: scale3d(1.1, 1.1, 1); transition: all .5s ease-in-out; -webkit-transform: scale3d(1.1, 1.1, 1); -webkit-transition: all .5s ease-in-out } .effect.effect-eight p { font-size: .9rem; padding: 10px 5px; transform: scale3d(.8, .8, 1); -webkit-transform: scale3d(.8, .8, 1); opacity: 0; transition: all .35s; -transition: all .35s; font-family: Poppins } .effect.effect-eight:hover p { transform: scale3d(1, 1, 1); -webkit-transform: scale3d(1, 1, 1); opacity: 1 } .effect.effect-eight .tab-text:after { content: ""; position: absolute; left: -230px; top: 0; border-top: 208px solid rgba(7, 0, 2, .3); border-left: 140px solid rgba(240, 74, 126, .6); border-bottom: 188px solid transparent; border-right: 160px solid transparent; transition: all .4s ease-in-out; -webkit-transition: all .4s ease-in-out } .effect.effect-eight:hover .tab-text:after { transform: rotate3d(0, 0, 1, 52deg) scale3d(1, 1, 1); -webkit-transform: rotate3d(0, 0, 1, 52deg) scale3d(1, 1, 1); opacity: 1; top: 103px; left: -378px; border-top: 325px solid rgba(240, 74, 126, .8); border-left: 422px solid rgba(240, 74, 126, .8); border-bottom: 218px solid transparent; border-right: 160px solid transparent } .effect.effect-eight .icons-block { z-index: 1000; position: absolute; bottom: 15px; width: 100%; left: 0; text-align: left; padding-left: 5px } .effect.effect-eight .icons-block .social-icon-1, .effect.effect-eight .icons-block .social-icon-2, .effect.effect-eight .icons-block .social-icon-3 { transition: all .5s ease-in-out; opacity: 0 } .effect.effect-eight:hover .social-icon-1 { opacity: 1; transition-delay: .3s; transition-duration: .5s } .effect.effect-eight:hover .social-icon-2 { opacity: 1; transition-delay: .4s; transition-duration: .5s } .effect.effect-eight:hover .social-icon-3 { opacity: 1; transition-delay: .5s; transition-duration: .5s } .effect.effect-eight .icons-block i { color: rgba(255, 255, 255, 1); padding-left: 10px; font-size: 1.3rem } .effect.effect-nine img { transition: all .3s ease-in-out; transform: translate3d(0, 0, 0) scale(1, 1); -webkit-transition: all .3s ease-in-out; -webkit-transform: translate3d(0, 0, 0) scale(1, 1) } .effect.effect-nine:hover img { opacity: .6; transform: translate3d(-20px, 0, 0) scale(1.1, 1.1); -webkit-transform: translate3d(-20px, 0, 0) scale(1.1, 1.1) } .effect.effect-nine .tab-text h2 { font-family: Oswald; transform: scale3d(.9, .9, 1); transition: all .5s ease-in-out; -webkit-transform: scale3d(.9, .9, 1); -webkit-transition: all .5s ease-in-out; z-index: 2; position: relative; padding-top: 18% } .effect.effect-nine:hover h2 { transform: scale3d(1, 1, 1); transition: all .5s ease-in-out; -webkit-transform: scale3d(1, 1, 1); -webkit-transition: all .5s ease-in-out } .effect.effect-nine p { font-size: .8rem; padding: 10px 5px; transform: scale3d(.8, .8, 1); -webkit-transform: scale3d(.8, .8, 1); opacity: 0; -webkit-transition: all .35s; transition: all .35s; font-family: Poppins; z-index: 2; position: relative } .effect.effect-nine:hover p { transform: scale3d(1, 1, 1); -webkit-transform: scale3d(1, 1, 1); opacity: 1 } .effect.effect-nine .tab-text:after { content: ""; position: absolute; left: 0; top: 0; width: calc(100% - 0px); height: inherit; border-top: 10px solid transparent; border-left: 10px solid transparent; border-bottom: 10px solid transparent; border-right: 10px solid transparent; transition: all .4s ease-in-out; -webkit-transition: all .4s ease-in-out } .effect.effect-nine:hover .tab-text:after { opacity: 1; top: 0; left: 0; border-top: 135px solid rgba(0, 0, 0, .5); border-left: 135px solid rgba(0, 0, 0, .5); border-bottom: 135px solid rgba(0, 0, 0, .5); border-right: 135px solid rgba(0, 0, 0, .5) } .effect.effect-nine .icons-block { z-index: 1000; position: absolute; top: 10px; width: 100%; left: 0; text-align: left; padding-left: 15px; padding-top: 10px } .effect.effect-nine .icons-block .social-icon-1, .effect.effect-nine .icons-block .social-icon-2, .effect.effect-nine .icons-block .social-icon-3 { transition: all .5s ease-in-out; opacity: 0 } .effect.effect-nine:hover .social-icon-1 { opacity: 1; transition-delay: .3s; transition-duration: .5s } .effect.effect-nine:hover .social-icon-2 { opacity: 1; transition-delay: .4s; transition-duration: .5s } .effect.effect-nine:hover .social-icon-3 { opacity: 1; transition-delay: .5s; transition-duration: .5s } .effect.effect-nine .icons-block i { color: rgba(255, 255, 255, .9); padding-left: 7px; font-size: 1.2rem } .effect.effect-ten { background-color: #162633 } .effect.effect-ten img { transition: all .35s; transform: translate3d(-20px, 0, 0) scale(1.1, 1.1); -webkit-transition: all .35s; -webkit-transform: translate3d(-20px, 0, 0) scale(1.1, 1.1) } .effect.effect-ten:hover img { opacity: .85; transform: translate3d(0, 0, 0) scale(1, 1); -webkit-transform: translate3d(0, 0, 0) scale(1, 1) } .effect.effect-ten h2 { transform: translate3d(0, 5px, 0); -webkit-transform: translate3d(0, 5px, 0); transition: all .35s; -webkit-transition: all .35s; font-family: Oswald; z-index: 2; position: relative; padding-top: 10% } .effect.effect-ten:hover h2 { transform: translate3d(0, 0, 0); -webkit-transform: translate3d(0, 0, 0) } .effect.effect-ten p { font-size: .8rem; line-height: 1.1; padding-top: 5px; transform: translate3d(0, 10px, 0); transition: all .35s; -webkit-transform: translate3d(0, 10px, 0); -webkit-transition: all .35s; font-family: Poppins } .effect.effect-ten:hover p { transform: translate3d(0, 0, 0); -webkit-transform: translate3d(0, 0, 0) } .effect.effect-ten .tab-text { transform-style: preserve-3d; -webkit-transform-style: preserve-3d; perspective: 300px } .effect.effect-ten .tab-text:after { content: ""; width: 180%; height: 180%; background: linear-gradient(-45deg, rgba(0, 0, 0, 0) 49%, rgba(0, 0, 0, .45) 50%); position: absolute; top: 0; left: 0; -webkit-transition: all .4s linear; transition: all .4s linear } .effect.effect-ten .tab-text:before { content: ""; position: absolute; bottom: 0; right: 0; width: 60px; height: 60px; background: linear-gradient(-45deg, rgba(0, 0, 0, 0) 49%, rgba(132, 132, 132, .45) 50%, rgba(255, 255, 255, .65) 65%); transform: rotate3d(-1, 1, 0, 20deg); transform-origin: 50% 50%; transition: width .2s linear .2s, height .2s linear .2s, bottom .2s linear 0s, right .2s linear 0s; -webkit-transform: rotate3d(-1, 1, 0, 20deg); -webkit-transform-origin: 50% 50%; -webkit-transition: width .2s linear .2s, height .2s linear .2s, bottom .2s linear 0s, right .2s linear 0s } .effect.effect-ten:hover .tab-text:after { top: -80%; left: -80%; background: linear-gradient(-45deg, rgba(0, 0, 0, 0) 49%, rgba(0, 0, 0, .45) 60%) } .effect.effect-ten:hover .tab-text:before { width: 100%; height: 100%; bottom: 50%; right: 50%; -webkit-transition: width .2s linear 0s, height .2s linear 0s, bottom .2s linear .2s, right .2s linear .2s; transition: width .2s linear 0s, height .2s linear 0s, bottom .2s linear .2s, right .2s linear .2s } .effect.effect-ten .icons-block { z-index: 1000; position: absolute; top: 10px; width: 100%; left: 0; text-align: left; padding-left: 15px; padding-top: 10px } .effect.effect-ten .icons-block .social-icon-1, .effect.effect-ten .icons-block .social-icon-2, .effect.effect-ten .icons-block .social-icon-3 { transition: all .5s ease-in-out; opacity: 0 } .effect.effect-ten:hover .social-icon-1 { opacity: 1; transition-delay: .3s; transition-duration: .5s } .effect.effect-ten:hover .social-icon-2 { opacity: 1; transition-delay: .4s; transition-duration: .5s } .effect.effect-ten:hover .social-icon-3 { opacity: 1; transition-delay: .5s; transition-duration: .5s } .effect.effect-ten .icons-block i { color: rgba(255, 255, 255, .9); padding-left: 7px; font-size: 1.2rem } .effect.effect-eleven { background-color: #3498db } .effect.effect-eleven img { transform: translate3d(-10px, 0, 0); transition: all .35s; -webkit-transform: translate3d(-10px, 0, 0); -webkit-transition: all .35s } .effect.effect-eleven:hover img { opacity: .6; transform: translate3d(-30px, 0, 0) scale(1.1, 1.1); -webkit-transform: translate3d(-30px, 0, 0) scale(1.1, 1.1) } .effect.effect-eleven h2 { text-align: left; transform: translate3d(-10px, 0, 0); transition: all .55s 0s; -webkit-transform: translate3d(-10px, 0, 0); -webkit-transition: all .55s 0s; font-family: Oswald; z-index: 2; position: relative; padding-top: 10% } .effect.effect-eleven:hover h2 { transform: translate3d(0, 0, 0); -webkit-transform: translate3d(0, 0, 0) } .effect.effect-eleven p { text-align: left; line-height: 1.2; padding-top: 34px; padding-left: 1px; font-size: .9rem; transform: translate3d(15px, 0, 0); -webkit-transform: translate3d(15px, 0, 0); opacity: 0; transition: all .35s 0s; z-index: 5; position: absolute; word-spacing: 3px; top: 65px; width: calc(100% - 4em); font-family: Poppins } .effect.effect-eleven:hover p { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1; -webkit-transition-delay: .2s; transition-delay: .2s } .effect.effect-eleven .tab-text:before { content: ""; position: absolute; right: 0; top: 0; border-top: 125px solid rgba(255, 255, 255, .3); border-right: 350px solid transparent; border-bottom: 125px solid rgba(255, 255, 255, .3); transform: translate3d(-100%, 0, 0); transition: all .35s; -webkit-transform: translate3d(-100%, 0, 0); -webkit-transition: all .35s } .effect.effect-eleven .tab-text:after { content: ""; position: absolute; right: 0; top: 0; border-top: 125px solid transparent; border-right: 350px solid rgba(255, 255, 255, .3); border-bottom: 125px solid transparent; transform: translate3d(100%, 0, 0); transition: all .35s; -webkit-transform: translate3d(100%, 0, 0); -webkit-transition: all .35s } .effect.effect-eleven:hover .tab-text:after, .effect.effect-eleven:hover .tab-text:before { transform: translate3d(0, 0, 0); -webkit-transform: translate3d(0, 0, 0) } .effect.effect-eleven .icons-block { z-index: 1000; position: absolute; bottom: 25px; width: 100%; left: 0; text-align: left; padding-left: 15px } .effect.effect-eleven .icons-block .social-icon-1, .effect.effect-eleven .icons-block .social-icon-2, .effect.effect-eleven .icons-block .social-icon-3 { transition: all .5s ease-in-out; opacity: 0 } .effect.effect-eleven:hover .social-icon-1 { opacity: 1; transition-delay: .3s; transition-duration: .5s } .effect.effect-eleven:hover .social-icon-2 { opacity: 1; transition-delay: .4s; transition-duration: .5s } .effect.effect-eleven:hover .social-icon-3 { opacity: 1; transition-delay: .5s; transition-duration: .5s } .effect.effect-eleven .icons-block i { color: rgba(255, 255, 255, 1); padding-left: 10px; font-size: 1.3rem } .effect.effect-twelve { background: #42b078 } .effect-twelve .tab-text h2 { position: relative; padding: .5em 0; text-align: left; overflow: hidden; font-family: Oswald } .effect.effect-twelve h2:after { content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: 3px; background-color: #fff; transform: translate3d(-100%, 0, 0); transition: all .35s; -webkit-transform: translate3d(-100%, 0, 0); -webkit-transition: all .35s } .effect.effect-twelve:hover h2:after { transform: translate3d(0, 0, 0) } .effect-twelve .tab-text p { padding: .7em 0; font-size: .8rem; text-align: left; line-height: 1.1; transform: translate3d(100%, 0, 0); -webkit-transform: translate3d(100%, 0, 0); opacity: 0; transition: all .35s; -webkit-transition: all .35s; font-family: Poppins } .effect-twelve:hover p { transform: translate3d(0, 0, 0); -webkit-transform: translate3d(0, 0, 0); opacity: 1 } .effect.effect-twelve img { max-width: none; opacity: 1; transform: translate3d(-10px, 0, 0); transition: all .35s; -webkit-transform: translate3d(-10px, 0, 0); -webkit-transition: all .35s } .effect.effect-twelve:hover img { transform: translate3d(0, 0, 0); -webkit-transform: translate3d(0, 0, 0); opacity: .4 } .effect.effect-twelve .icons-block { z-index: 1000; position: absolute; bottom: 25px; width: 100%; left: 0; text-align: left; padding-left: 15px } .effect.effect-twelve .icons-block .social-icon-1, .effect.effect-twelve .icons-block .social-icon-2, .effect.effect-twelve .icons-block .social-icon-3 { transition: all .5s ease-in-out; opacity: 0 } .effect.effect-twelve:hover .social-icon-1 { opacity: 1; transition-delay: .3s; transition-duration: .5s } .effect.effect-twelve:hover .social-icon-2 { opacity: 1; transition-delay: .4s; transition-duration: .5s } .effect.effect-twelve:hover .social-icon-3 { opacity: 1; transition-delay: .5s; transition-duration: .5s } .effect.effect-twelve .icons-block i { color: rgba(255, 255, 255, 1); padding-left: 10px; font-size: 1.3rem } @media (max-width:575px) { .effect.effect-two p.description { bottom: 5.8em } } @media (min-width:576px) and (max-width:767px) { .tab .effect .tab-text h2 { font-size: 1.3rem!important; font-family: Oswald } .effect.effect-two p.description { bottom: 5.8em } } @media (min-width:768px) and (max-width:991px) { .effect h2 { font-size: 1.3rem!important } }

Related: See More


Questions / Comments: