Анимация карточек при наведении: стильные эффекты на SCSS
card-hover-cardup<div class="container py-5"> <div class="row"> <div class="col-md-3 col-sm-6"> <figure class="card card-hover-cardup border-0 rounded-0"> <img class="card-img" src="https://i.ibb.co/s66WRrn/02.jpg" /> <figcaption class="card-body"> <h5 class="card-title text-dark">部落衝突</h5> <p class="card-text small"> 遊戲講述了各部落為了爭奪資源和土地,進行了無數次的戰鬥的故事,玩家可為自己的村莊,建造訓練營、兵營、城牆等建築物,來壯大自己的軍隊實力,保護好自己的村莊,同時可以侵略其他部落,掠奪更多資源,使自己的軍隊變得更強 </p> </figcaption> </figure> </div> <div class="col-md-3 col-sm-6"> <figure class="card cord-hover-rotate border-0 rounded-0"> <img class="card-img" src="https://i.ibb.co/s66WRrn/02.jpg" /> <figcaption class="card-body"> <h5 class="card-title text-dark">部落衝突</h5> <p class="card-text small"> 遊戲講述了各部落為了爭奪資源和土地,進行了無數次的戰鬥的故事,玩家可為自己的村莊,建造訓練營、兵營、城牆等建築物,來壯大自己的軍隊實力,保護好自己的村莊,同時可以侵略其他部落,掠奪更多資源,使自己的軍隊變得更強 </p> </figcaption> </figure> </div> <div class="col-md-3 col-sm-6"> <figure class="card cord-hover-pushDown border-0 rounded-0"> <img class="card-img" src="https://i.ibb.co/s66WRrn/02.jpg" /> <figcaption class="card-body"> <h5 class="card-title text-dark">部落衝突</h5> <p class="card-text small"> 遊戲講述了各部落為了爭奪資源和土地,進行了無數次的戰鬥的故事,玩家可為自己的村莊,建造訓練營、兵營、城牆等建築物,來壯大自己的軍隊實力,保護好自己的村莊,同時可以侵略其他部落,掠奪更多資源,使自己的軍隊變得更強 </p> </figcaption> </figure> </div> <div class="col-md-3 col-sm-6"> <figure class="card card-hover-upTitleBg border-0 rounded-0"> <img class="card-img" src="https://i.ibb.co/s66WRrn/02.jpg" /> <figcaption class="card-body text-dark"> <h5 class="card-title text-dark">部落衝突</h5> <p class="card-text small"> 遊戲講述了各部落為了爭奪資源和土地,進行了無數次的戰鬥的故事,玩家可為自己的村莊,建造訓練營、兵營、城牆等建築物,來壯大自己的軍隊實力,保護好自己的村莊,同時可以侵略其他部落,掠奪更多資源,使自己的軍隊變得更強 </p> </figcaption> </figure> </div> <div class="col-md-3 col-sm-6"> <figure class="card cord-hover-flip border-0 rounded-0"> <img class="card-img" src="https://i.ibb.co/x6RCJ8c/04.jpg" /> <figcaption class="card-body"> <h5 class="card-title text-dark">部落衝突</h5> <p class="card-text small"> 遊戲講述了各部落為了爭奪資源和土地,進行了無數次的戰鬥的故事,玩家可為自己的村莊,建造訓練營、兵營、城牆等建築物,來壯大自己的軍隊實力,保護好自己的村莊,同時可以侵略其他部落,掠奪更多資源,使自己的軍隊變得更強 </p> </figcaption> </figure> </div> <div class="col-md-3 col-sm-6"> <figure class="card card-hover-showimg border-0 rounded-0"> <img class="card-img" src="https://i.ibb.co/s66WRrn/02.jpg" /> <figcaption class="card-body"> <h5 class="card-title text-dark">部落衝突</h5> <p class="card-text small"> 遊戲講述了各部落為了爭奪資源和土地,進行了無數次的戰鬥的故事,玩家可為自己的村莊,建造訓練營、兵營、城牆等建築物,來壯大自己的軍隊實力,保護好自己的村莊,同時可以侵略其他部落,掠奪更多資源,使自己的軍隊變得更強 </p> </figcaption> </figure> </div> <div class="col-md-3 col-sm-6"> <figure class="card card-hover-upTitle border-0 rounded-0 bg-dark"> <img class="card-img" src="https://i.ibb.co/KNTGF8w/7bb84460d2d9ec355adb97e4c33a2984.jpg" /> <a href="#"></a> <figcaption class="card-body text-white"> <h5 class="card-title text-center">部落衝突</h5> <p class="card-text small"> 遊戲講述了各部落為了爭奪資源和土地,進行了無數次的戰鬥的故事,玩家可為自己的村莊,建造訓練營、兵營、城牆等建築物,來壯大自己的軍隊實力,保護好自己的村莊,同時可以侵略其他部落,掠奪更多資源,使自己的軍隊變得更強 </p> </figcaption> </figure> </div> <div class="col-md-3 col-sm-6"> <figure class="card card-hover-3dFX border-0 rounded-0"> <img class="card-img" src="https://i.ibb.co/s66WRrn/02.jpg"/> <figcaption class="img-title">部落衝突</figcaption> </figure> </div> <div class="col-md-3 col-sm-6"> <figure class="card card-hover-foggy border-0 rounded-0 bg-dark"> <img class="card-img" src="https://i.ibb.co/s66WRrn/02.jpg" /> <figcaption class="card-body"> <h5 class="card-title text-success">部落衝突</h5> <p class="card-text text-white small"> 遊戲講述了各部落為了爭奪資源和土地,進行了無數次的戰鬥的故事,玩家可為自己的村莊,建造訓練營、兵營、城牆等建築物,來壯大自己的軍隊實力,保護好自己的村莊,同時可以侵略其他部落,掠奪更多資源,使自己的軍隊變得更強 </p> </figcaption> </figure> </div> <div class="col-md-3 col-sm-6"> <figure class="card card-hover-textBg border-0 rounded-0"> <img class="card-img" src="https://i.ibb.co/R9zB7g4/7bb84460d2d9ec355adb97e4c33a2984.jpg" /> <figcaption class="card-body"> <h5 class="card-title text-dark">部落衝突</h5> <p class="card-text small"> 遊戲講述了各部落為了爭奪資源和土地,進行了無數次的戰鬥的故事,玩家可為自己的村莊,建造訓練營、兵營、城牆等建築物,來壯大自己的軍隊實力,保護好自己的村莊,同時可以侵略其他部落,掠奪更多資源,使自己的軍隊變得更強 </p> </figcaption> </figure> </div> <div class="col-md-3 col-sm-6"> <figure class="card card-hover-minCard border-0 rounded-0 bg-dark"> <img class="card-img" src="https://i.ibb.co/whgxM2N/03.jpg" /> <figcaption class="card-body"> <h5 class="card-title text-dark">部落衝突</h5> <p class="card-text small"> 遊戲講述了各部落為了爭奪資源和土地,進行了無數次的戰鬥的故事,玩家可為自己的村莊,建造訓練營、兵營、城牆等建築物,來壯大自己的軍隊實力,保護好自己的村莊,同時可以侵略其他部落,掠奪更多資源,使自己的軍隊變得更強 </p> </figcaption> </figure> </div> </div> </div>
@import url(https://fonts.googleapis.com/earlyaccess/notosanstc.css); body { font-family: 'Noto Sans TC', sans-serif; background: #24282f; height: 100%; } .card-img{ width: 100%; min-height: 100%; transition: 0.2s; border:0; border-radius:0; } .card-hover-cardup{ overflow: hidden; box-shadow: 0 5px 10px rgba(0,0,0,0.8); .card-body{ position: absolute; transition: 0.2s; left: 0; right: 0; bottom: 0; top: 0; background-color: #fff; transform: translateY(100%); } .card-img{ transition: all 0.6s ease; } &:hover{ .card-body{ transform: translateY(0); } .card-img{ transform: translateY(-100%); } } } // 只有這個規格不一樣 .card-hover-3dFX{ overflow: hidden; box-shadow: 0 5px 10px rgba(0,0,0,0.8); transform-origin: center top; transform-style: preserve-3d; transform: translateZ(0); transition: 0.3s; position: relative; &:after{ position: absolute; content: ''; z-index: 10; width: 200%; height: 100%; top: -90%; left: -20px; opacity: 0.1; transform: rotate(45deg); background: linear-gradient(to top, transparent, #fff 15%, rgba(255,255,255,0.5)); transition: 0.3s; } .img-title{ position: absolute; display: block; bottom: 0; left: 0; right: 0; padding: 20px; padding-bottom: 6px; color: #fff; transform: translateY(100%); transition: 0.3s; background-image: linear-gradient(180deg, rgba(0,0,0,0.00) 0%, rgba(0,0,0,0.60) 100%); } &:active,&:focus,&:hover{ box-shadow: 0 8px 16px 3px rgba(0,0,0,0.6); transform: translateY(-3px) scale(1.05) rotateX(15deg); border:0; .img-title{transform: none;} &:after{ transform: rotate(25deg); top: -40%; opacity: 0.15; } } } .card-hover-foggy{ position: relative; overflow: hidden; box-shadow: 0 5px 10px rgba(0,0,0,0.8); .card-body{ position: absolute; text-shadow: 0 1px 0 rgba(51,51,51,0.3); left: 0; right: 0; top: 0; bottom: 0; box-shadow: 0 0 2px rgba(0,0,0,0.2); background: rgba(6,18,53,0.8); opacity: 0; transform: scale(1.15); transition: 0.2s; } &:hover,&:focus,&:active{ box-shadow: 0 2px 4px rgba(0,0,0,0.7); .card-img{ filter: blur(3px); transform: scale(0.97); } .card-body{ opacity: 1; transform: none; } } } .card-hover-textBg{ overflow: hidden; box-shadow: 0 5px 10px rgba(0,0,0,0.9); position: relative; .card-body{ position: absolute; left: 0; right: 0; bottom: 0; top: 0; background: rgba(255,255,255,.9); opacity: 0; transition: 0.2s; transform: translateY(100%); } &:hover,&:focus,&:active{ box-shadow: 0 2px 4px rgba(0,0,0,0.7); .card-img{ filter: blur(3px); transform: scale(1.2); } .card-body{ transition-delay: 0.1s; opacity: 1; transform: none; } } } .card-hover-minCard{ overflow: hidden; box-shadow: 0 5px 10px rgba(0,0,0,0.8); position: relative; .card-body{ position: absolute; left: 0.5rem; right: 0.5rem; bottom: 0.5rem; top: 1rem; background: rgb(255,255,255); opacity: 0; transition: 0.2s; transform: translateY(-50%); transform:rotateX(90deg); overflow: hidden; } &:hover,&:focus,&:active{ box-shadow: 0 2px 4px rgba(0,0,0,0.7); .card-img{ filter: blur(3px); transform: scale(1.2); } .card-body{ transition-delay: 0.2s; opacity: 1; transform: none; } } } .card-hover-upTitle{ overflow: hidden; position: relative; box-shadow: 0 1px 1px rgba(0,0,0,0.1), 0 2px 2px rgba(0,0,0,0.1), 0 4px 4px rgba(0,0,0,0.1), 0 8px 8px rgba(0,0,0,0.1), 0 16px 16px rgba(0,0,0,0.1); &:before{ position: absolute; content: ''; z-index: 1; background-image: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.8) 100%); transition: 0.2s; top: 0; bottom: 0; left: 0; right: 0; opacity: 0; } .card-body{ position: absolute; left: 0; right: 0; top: 80%; bottom: 50%; z-index: 2; text-shadow: 0 0 4px rgba(0,0,0,.5); transition: 0.5s; .card-text{ transition: 0.3s; opacity: 0; } } &:hover{ &:before{ transform: none; opacity: 1; } .card-img{ transform: translateY(-3px) scale(1.1); } .card-body{ transition-delay: 0.1s; top: 10%; transform: none; text-shadow: 0 0 10px rgba(0,0,0,.8); .card-text{ transition-delay: 0.1s; opacity: 1; transform: none; } } } } .card-hover-upTitleBg{ overflow: hidden; position: relative; box-shadow: 0 1px 1px rgba(0,0,0,0.1), 0 2px 2px rgba(0,0,0,0.1), 0 4px 4px rgba(0,0,0,0.1), 0 8px 8px rgba(0,0,0,0.1), 0 16px 16px rgba(0,0,0,0.1); .card-body{ position: absolute; left: 0; right: 0; top: 90%; bottom: 0; z-index: 2; transition: all 0.5s; padding-top: 0; box-shadow:0 5px 10px #fff, 0 0 10px #fff, 0 -5px 10px #fff, 0 -10px 10px #fff, 0 -20px 10px #fff, 0 -20px 20px #fff, 0 -10px 30px #fff; background-color: #fff; .card-text{ transition: opacity 0.3s; opacity: 0; } } &:hover{ .card-img{ transform: translateY(-100px) scale(1.1); } .card-body{ transition-delay: 0.1s; top: 40%; .card-text{ transition-delay: 0.1s; opacity: 1; } } } } .card-hover-showimg{ overflow: hidden; position: relative; .card-body{ position: absolute; left: 0; right:0; bottom: 0; top: 0; background-color: rgba(255,255,255,1); transition: 0.5s; [class*="text-"]{ transition: 0.5s; } } &:hover,&:focus,&:active{ .card-body{ background-color: rgba(0,0,0, .3); color:#fff; text-shadow:0 0 4px rgba(0,0,1,.7); [class*="text-"]{ color:#fff !important; } } } } .cord-hover-flip{ background-color: transparent; position: relative; overflow: hidden; transform-style: preserve-3d; .card-img,.card-body{ transition: .9s cubic-bezier(0.68, -0.55, 0.265, 1.55); transform-style: preserve-3d; box-shadow: 0 5px 10px rgba(0,0,0,0.8); } .card-img{ transform: translateZ(60px); opacity: 1; } .card-body{ position: absolute; left: 0; right: 0; top: 0; bottom: 0; transform: translateZ(40px); background-color: #fff; z-index:-1; transform: rotateY(180deg); overflow: hidden; } &:hover,&:focus,&:active{ // transform: rotateY(180deg); .card-img{ transform: rotateY(180deg); opacity: 0; } .card-body{ transform: rotateY(180deg); transform: translateZ(40px); z-index:1; } } } .cord-hover-pushDown{ background-color: transparent; position: relative; overflow: hidden; background-color: #07090c; perspective: 50em; .card-img,.card-body{ transition: all 0.6s ease; } .card-img{ transform-origin: 50% 100%; opacity: 1; } .card-body{ position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: #fff; overflow: hidden; transform: rotateX(-90deg); transform-origin: 50% -50%; z-index: 1; opacity: 0; } &:hover,&:focus,&:active{ .card-img{ transform: rotateX(90deg); opacity: 0; } .card-body{ transform: rotateX(0deg); transition-delay: 0.2s; opacity: 1; } } } .cord-hover-rotate{ background-color: #222; position: relative; overflow: hidden; .card-img,.card-body{ transition: .9s cubic-bezier(0.68, -0.2, 0.265, 1.55); } .card-img{ opacity: 1; transform-origin:right bottom; transform:rotate(0deg); } .card-body{ position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: #fff; z-index: 1; opacity: 0; transform-origin:left bottom; transform:rotate(-90deg); } &:hover,&:focus,&:active{ .card-img{ opacity: 0; transform:rotate(90deg); } .card-body{ transition-delay: 0.2s; opacity: 1; transform:rotate(0deg); } } }
bootstrap-card-hover-img.zip
0
35.5 Kb
Нашли ошибку? Сообщите нам, мы исправим!
Комментариев нет
Чтобы оставить комментарий, необходимо на сайте.
Копирование запрещено!