Make corner ribbon sticky for pricing table - html

Question

Basically, I have price table with corner ribbon. On the price table, I've slide up transition on hover. When I hover on price table, the corner ribbon displace. Have a look at my code. I want to make the corner ribbon sticky on hover with sliding transition.
CSS
.zoom:hover {
transition: transform .5s ease;
-webkit-transition: 0.3s;
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
transition: transform 300ms;
transform: translate3d(0, -1%, 0);
}
/* RIBBON CSS */
.container__wrapper {
left: 0px;
position: absolute;
top: 15px;
height: 141px;
width: 170px;
overflow: hidden;
}
.container__ribbon {
z-index: 100;
left: -60px;
position: absolute;
top: 40px;
height: 30px;
width: 230px;
transform: rotate(-45deg);
background-color: #FF0000;
display: flex;
align-content: center;
justify-content: center;
box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px;
}
.container__ribbon h6 {
font-size: 16px;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
color: #fff;
align-self: center !important;
font-weight: 400;
padding-top: 0.3em;
}
/*___________________________________________________________ */
/* css for package */
/* SCROLLBARR CSS */
.card {
border: 0 !important;
}
.scrollbar-dusty-grass::-webkit-scrollbar-track {
box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
background-color: #DAD8D9;
border-radius: 10px;
}
.scrollbar-dusty-grass::-webkit-scrollbar {
width: 12px;
background-color: #F5F5F5;
}
.scrollbar-dusty-grass::-webkit-scrollbar-thumb {
border-radius: 10px;
box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.0);
background-image: -webkit-linear-gradient(330deg, #11A085 0%, #11A085 100%);
background-image: linear-gradient(120deg, #11A085 0%, #11A085 100%);
}
.bordered-cyan::-webkit-scrollbar-thumb {
box-shadow: none;
}
.square::-webkit-scrollbar-track {
border-radius: 0 !important;
}
.square::-webkit-scrollbar-thumb {
border-radius: 0 !important;
}
.thin::-webkit-scrollbar {
width: 6px;
}
.example-1 {
position: relative;
overflow-y: scroll;
height: 175px;
}
/* CAROUSEL */
.brderline {
margin-top: 1rem;
padding: .5rem;
border: 1px solid #11A085;
}
/* PACKAGES TITLE */
.packagetitle h4 {
color: #323232 !important;
font-size: 15px;
font-weight: 700;
}
.packagetitle h1 {
color: #323232 !important;
font-size: 35px;
font-weight: 800;
}
.pkpara {
font-family: 'Circular Std Book';
font-size: 25px;
color: #323232 !important;
font-weight: 100;
font-size: 20px;
}
/* PACKAGE BOX CSS */
/* .pk1 {
border: 1px solid #11A085;
} */
.tagimg {
position: absolute;
top: 2%;
left: 0;
width: 120px !important;
height: 120px;
}
.tagimg-r {
position: absolute;
top: 2%;
right: 0;
width: 120px !important;
height: 120px;
}
.pkg1 h5 {
font-size: 15px;
color: #11A085;
}
.pkg1 h2 {
font-size: 25px;
color: #323232;
font-weight: 700;
}
.pkg1 p {
font-size: 16px;
color: #8d8d8d;
text-decoration: line-through;
}
.pkg1 h1 {
color: #11A085;
font-size: 45px;
font-weight: 700;
margin-bottom: 1rem;
}
ul.pkg-items>li {
color: #323232;
list-style: none;
font-family: Circular Std Medium;
font-style: normal;
}
ul.pkg-items li::before {
content: "\2022";
color: #8d8d8d;
font-weight: bold;
display: inline-block;
width: 1.5rem;
}
.pkgbtn {
text-align: center;
margin: 2rem 0;
}
.innerpkgbtn {
padding: 20px 60px !important;
}
.pkg1 h6 {
font-size: 14px;
color: #8d8d8d;
}
.viewmre h4 {
padding: 1rem 0 !important;
font-size: 14px;
text-align: center;
}
.callnchat {
font-size: 16px;
text-align: center;
margin-bottom: 2rem;
}
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.1/dist/css/bootstrap.min.css">
<!-- Owl Carousel -->
<link rel="stylesheet" href="<?php echo BASE_URL; ?>/assets/css/owl.carousel.css">
<link rel="stylesheet" href="<?php echo BASE_URL; ?>/assets/css/owl.theme.green.css">
<script src="<?php echo BASE_URL; ?>/assets/js/jquery.min.js" type="text/javascript"></script>
<script src="<?php echo BASE_URL; ?>/assets/js/owl.carousel.min.js" type="text/javascript"></script>
<div class="item brderline zoom">
<div class="pt-2 pb-2 pkg1">
<div class="pk1">
<div class="container__wrapper">
<div class="container__ribbon">
<h6>Free Delivery Rush</h6>
</div>
</div>
<!-- <img src="assets/img/badgeleft.png" class="tagimg">s -->
<h5 class="text-center">LOGO PACKAGE</h5>
<h2 class="text-center">BASIC <br> LOGO PACKAGE</h2>
<p class="text-center">$339</p>
<h1 class="text-center">$45.00</h1>
<div class="card example-1 square scrollbar-dusty-grass square thin">
<ul class="pkg-items">
<li>3 Custom Logo Design Concepts</li>
<li>1 Dedicated Designer</li>
<li>4 Revisions</li>
<li>2 hours TAT</li>
<li>Unique Design Guarantee</li>
<li>100% Unique Design Guarantee</li>
<li>100% Satisfaction Guarantee</li>
<li>100% Money Back Guarantee *</li>
<li>100% Ownership Rights</li>
</ul>
</div>
<div class="pkgbtn"><button type="button" class="btn innerpkgbtn">ORDER NOW</button></div>
<h6 class="text-center">$50 Additional For Expedited Services </h6>
<div class="viewmre">
<h4> VIEW DETAILS</h4>
</div>
<div class="callnchat">
<i class="fas fa-phone-square-alt"></i>1·866·268·1794
<i class="fas fa-comment-dots"></i>LIVE CHAT
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/jquery#3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.1/dist/js/bootstrap.min.js" integrity="sha384-VHvPCCyXqtD5DqJeNxl2dtTyhF78xXNXdkwX1CZeRusQfRKp+tA7hAShOK/B/fQ2" crossorigin="anonymous"></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js'></script>
**

Answer 1

absolute
The element is removed from the normal document flow, and no space is created for the element in the page layout. It is positioned relative to its closest positioned ancestor, if any; otherwise, it is placed relative to the initial containing block. -MDN
Since .container__wrapper is positioned absolute, make it so it is relative to a parent that is also positioned and moves on hover, for example, the .item class. See the snippet below:
.zoom:hover {
transition: transform .5s ease;
-webkit-transition: 0.3s;
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
transition: transform 300ms;
transform: translate3d(0, -1%, 0);
}
/* RIBBON CSS */
.container__wrapper {
left: 0px;
position: absolute;
top: 0px;
height: 141px;
width: 170px;
overflow: hidden;
}
.item {
position: relative;
}
.container__ribbon {
z-index: 100;
left: -60px;
position: absolute;
top: 40px;
height: 30px;
width: 230px;
transform: rotate(-45deg);
background-color: #FF0000;
display: flex;
align-content: center;
justify-content: center;
box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px;
}
.container__ribbon h6 {
font-size: 16px;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
color: #fff;
align-self: center !important;
font-weight: 400;
padding-top: 0.3em;
}
/*___________________________________________________________ */
/* css for package */
/* SCROLLBARR CSS */
.card {
border: 0 !important;
}
.scrollbar-dusty-grass::-webkit-scrollbar-track {
box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
background-color: #DAD8D9;
border-radius: 10px;
}
.scrollbar-dusty-grass::-webkit-scrollbar {
width: 12px;
background-color: #F5F5F5;
}
.scrollbar-dusty-grass::-webkit-scrollbar-thumb {
border-radius: 10px;
box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.0);
background-image: -webkit-linear-gradient(330deg, #11A085 0%, #11A085 100%);
background-image: linear-gradient(120deg, #11A085 0%, #11A085 100%);
}
.bordered-cyan::-webkit-scrollbar-thumb {
box-shadow: none;
}
.square::-webkit-scrollbar-track {
border-radius: 0 !important;
}
.square::-webkit-scrollbar-thumb {
border-radius: 0 !important;
}
.thin::-webkit-scrollbar {
width: 6px;
}
.example-1 {
position: relative;
overflow-y: scroll;
height: 175px;
}
/* CAROUSEL */
.brderline {
margin-top: 1rem;
padding: .5rem;
border: 1px solid #11A085;
}
/* PACKAGES TITLE */
.packagetitle h4 {
color: #323232 !important;
font-size: 15px;
font-weight: 700;
}
.packagetitle h1 {
color: #323232 !important;
font-size: 35px;
font-weight: 800;
}
.pkpara {
font-family: 'Circular Std Book';
font-size: 25px;
color: #323232 !important;
font-weight: 100;
font-size: 20px;
}
/* PACKAGE BOX CSS */
/* .pk1 {
border: 1px solid #11A085;
} */
.tagimg {
position: absolute;
top: 2%;
left: 0;
width: 120px !important;
height: 120px;
}
.tagimg-r {
position: absolute;
top: 2%;
right: 0;
width: 120px !important;
height: 120px;
}
.pkg1 h5 {
font-size: 15px;
color: #11A085;
}
.pkg1 h2 {
font-size: 25px;
color: #323232;
font-weight: 700;
}
.pkg1 p {
font-size: 16px;
color: #8d8d8d;
text-decoration: line-through;
}
.pkg1 h1 {
color: #11A085;
font-size: 45px;
font-weight: 700;
margin-bottom: 1rem;
}
ul.pkg-items>li {
color: #323232;
list-style: none;
font-family: Circular Std Medium;
font-style: normal;
}
ul.pkg-items li::before {
content: "\2022";
color: #8d8d8d;
font-weight: bold;
display: inline-block;
width: 1.5rem;
}
.pkgbtn {
text-align: center;
margin: 2rem 0;
}
.innerpkgbtn {
padding: 20px 60px !important;
}
.pkg1 h6 {
font-size: 14px;
color: #8d8d8d;
}
.viewmre h4 {
padding: 1rem 0 !important;
font-size: 14px;
text-align: center;
}
.callnchat {
font-size: 16px;
text-align: center;
margin-bottom: 2rem;
}
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.1/dist/css/bootstrap.min.css">
<!-- Owl Carousel -->
<link rel="stylesheet" href="<?php echo BASE_URL; ?>/assets/css/owl.carousel.css">
<link rel="stylesheet" href="<?php echo BASE_URL; ?>/assets/css/owl.theme.green.css">
<script src="<?php echo BASE_URL; ?>/assets/js/jquery.min.js" type="text/javascript"></script>
<script src="<?php echo BASE_URL; ?>/assets/js/owl.carousel.min.js" type="text/javascript"></script>
<div class="item brderline zoom">
<div class="pt-2 pb-2 pkg1">
<div class="pk1">
<div class="container__wrapper">
<div class="container__ribbon">
<h6>Free Delivery Rush</h6>
</div>
</div>
<!-- <img src="assets/img/badgeleft.png" class="tagimg">s -->
<h5 class="text-center">LOGO PACKAGE</h5>
<h2 class="text-center">BASIC <br> LOGO PACKAGE</h2>
<p class="text-center">$339</p>
<h1 class="text-center">$45.00</h1>
<div class="card example-1 square scrollbar-dusty-grass square thin">
<ul class="pkg-items">
<li>3 Custom Logo Design Concepts</li>
<li>1 Dedicated Designer</li>
<li>4 Revisions</li>
<li>2 hours TAT</li>
<li>Unique Design Guarantee</li>
<li>100% Unique Design Guarantee</li>
<li>100% Satisfaction Guarantee</li>
<li>100% Money Back Guarantee *</li>
<li>100% Ownership Rights</li>
</ul>
</div>
<div class="pkgbtn"><button type="button" class="btn innerpkgbtn">ORDER NOW</button></div>
<h6 class="text-center">$50 Additional For Expedited Services </h6>
<div class="viewmre">
<h4> VIEW DETAILS</h4>
</div>
<div class="callnchat">
<i class="fas fa-phone-square-alt"></i>1·866·268·1794
<i class="fas fa-comment-dots"></i>LIVE CHAT
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/jquery#3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.1/dist/js/bootstrap.min.js" integrity="sha384-VHvPCCyXqtD5DqJeNxl2dtTyhF78xXNXdkwX1CZeRusQfRKp+tA7hAShOK/B/fQ2" crossorigin="anonymous"></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js'></script>
More on position's here.