Looking to enhance the functionality of a price table that features a corner ribbon? Currently, there is a hover effect on the price table that displaces the corner ribbon. Check out the code snippet below. The goal is to keep the corner ribbon sticky when hovered over, with a 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;
}**