Home > front end >  Make corner ribbon sticky for pricing table
Make corner ribbon sticky for pricing table

Time：02-17

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/[email protected]/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 >
        <div >
          <div >

            <div >
              <div >
                <h6>Free Delivery Rush</h6>
              </div>
            </div>

            <!-- <img src="assets/img/badgeleft.png" >s -->
            <h5 >LOGO PACKAGE</h5>
            <h2 >BASIC <br> LOGO PACKAGE</h2>
            <p >$339</p>
            <h1 >$45.00</h1>

            <div >
              <ul >
                <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 ><button type="button" >ORDER NOW</button></div>
            <h6 >$50 Additional For Expedited Services </h6>
            <div >
              <h4><a href="#" style="color: #323232; text-decoration: none;"> VIEW DETAILS</a></h4>
            </div>
            <div >
              <a href="tel:123456789" style="color: #11A085; text-decoration: none; font-family: Circular Std Medium;"><i ></i>1·866·268·1794</a>
              &nbsp; <a href="#" style="color: #11A085; text-decoration: none; font-family: Circular Std Medium;"><i ></i>LIVE CHAT</a>
            </div>

          </div>
        </div>
      </div>
  
  
  
  
  
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C OGpamoFVy38MVBnE IbbVYUew OrCXaRkfj" crossorigin="anonymous"></script>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU 6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/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>

**

CodePudding user response：

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/[email protected]/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 >

  <div >
    <div >
      <div >
        <div >
          <h6>Free Delivery Rush</h6>
        </div>
      </div>


      <!-- <img src="assets/img/badgeleft.png" >s -->
      <h5 >LOGO PACKAGE</h5>
      <h2 >BASIC <br> LOGO PACKAGE</h2>
      <p >$339</p>
      <h1 >$45.00</h1>

      <div >
        <ul >
          <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 ><button type="button" >ORDER NOW</button></div>
      <h6 >$50 Additional For Expedited Services </h6>
      <div >
        <h4><a href="#" style="color: #323232; text-decoration: none;"> VIEW DETAILS</a></h4>
      </div>
      <div >
        <a href="tel:123456789" style="color: #11A085; text-decoration: none; font-family: Circular Std Medium;"><i ></i>1·866·268·1794</a> &nbsp;
        <a href="#" style="color: #11A085; text-decoration: none; font-family: Circular Std Medium;"><i ></i>LIVE CHAT</a>
      </div>

    </div>
  </div>
</div>





<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C OGpamoFVy38MVBnE IbbVYUew OrCXaRkfj" crossorigin="anonymous"></script>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU 6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/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.

Page link：https//www.codepudding.com/frontend/304388.html

Prev:Aligning Twitter Bootstrap inline form group to the right?
Next:Round image with frame
  • Related

About Us:  Contact Us      Terms of Service       Privacy Policy

Copyright © 2010-2023，Powered By CodePudding