sudden (unintended) auto scrolling when hovering on an element

Raki Lachraf 0
Viewed 23

a sudden scrolling takes effect simultaneously with hovering on an element. What confuses me more is that it does not happen every time I hover over the element but just occasionally or maybe there is a specific scrolling position that I can't see yet.

the problem appeared after I added the upper triangle part with pseudo-element and handled it with a transition to move from right to left.

problem is illustrated in the GIF picture below.

any help please, thanks in advance.

/* Main Heading */
h2.main-heading {
  width: fit-content;
  padding: var(--mainPadding);
  margin: auto;
  text-transform: uppercase;
  font-size: 27px;
  border: solid 3px black;
  position: relative;
  transition-property: color, border-color;
  transition-duration: 0.5s;
  transition-delay: 0.3s;
  transition-timing-function: ease-in-out;
  margin-bottom: var(--sectionMarginPadding);
  z-index: 3;
}

h2.main-heading:hover {
  border-color: white;
  color: white;
}

h2.main-heading::before,
h2.main-heading::after {
  content: "";
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background-color: var(--mainColor);
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: -1;
  transition-property: left, right, width, height, border-radius;
  transition-duration: 0.5s, 0.5s, 0.3s;
  transition-timing-function: ease-in-out;
  transition-delay: 0, 0, 0.5s;
}
h2.main-heading::before {
  left: -37px;
}
h2.main-heading::after {
  right: -37px;
}

h2.main-heading:hover::before,
h2.main-heading:hover::after {
  width: calc(50% + 1px);
  height: calc(100% + 1px);
  border-radius: 0;
}
h2.main-heading:hover::before {
  left: 0;
}
h2.main-heading:hover::after {
  right: 0;
}

/* **************************************** Variables ***************************************** */
:root {
  --mainPadding: 17px;
  --mainMargin: 30px;
  --sectionMarginPadding: 70px;
  --mainColor: #953553; /* #2196f3 */
  --grayC: #ccc;
  --landingColor: #ececec;
  --pTextColor: #777;
}

/* **************************************** Global Rules ***************************************** */
html {
  scroll-behavior: smooth;
}

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

body {
  font-family: "Cairo", sans-serif;
}

.container {
  /* background-color: #ddd; */
  padding-left: var(--mainPadding);
  padding-right: var(--mainPadding);
  margin-left: auto;
  margin-right: auto;
  /* width: var(--containerWidth); */
}


/* *********************************** Features *********************************** */
.features {
  padding: var(--sectionMarginPadding) 0;
}

.features .content {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: var(--mainMargin);
}

.features .content .feature {
  overflow: hidden;
  border: solid 1px var(--grayC);
  padding-bottom: var(--mainMargin);
}

.features .content .feature .image::before {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  border-color: transparent transparent white transparent;
  border-style: solid;
  border-width: 0px 0px 171px 303px;
  z-index: 2;
  transition-property: border-width;
  transition-duration: 0.5s;
  transition-timing-function: ease-in-out;
}

.features .content .feature:hover .image::before {
  border-width: 171px 500px 171px 0;
}

.features .content .feature .image {
  position: relative;
  z-index: -2;
  overflow: hidden;
}
.features .content .feature .image::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0.7;
}

.features .content .feature img {
  display: block;
  max-width: 100%;
}

.features .content .feature:nth-of-type(1) .image::after {
  background-color: var(--mainColor);
}

.features .content .feature:nth-of-type(1) h3::after {
  content: "";
  position: absolute;
  bottom: -17px;
  left: 50%;
  transform: translateX(-50%);
  width: 80%;
  height: 7px;
  background-color: var(--mainColor);
}

.features .content .feature:nth-of-type(2) .image::after {
  background-color: #009788;
}

.features .content .feature:nth-of-type(2) h3::after {
  content: "";
  position: absolute;
  bottom: -17px;
  left: 50%;
  transform: translateX(-50%);
  width: 80%;
  height: 7px;
  background-color: #009788;
}

.features .content .feature:nth-of-type(3) .image::after {
  background-color: #03a9f5;
}

.features .content .feature:nth-of-type(3) h3::after {
  content: "";
  position: absolute;
  bottom: -17px;
  left: 50%;
  transform: translateX(-50%);
  width: 80%;
  height: 7px;
  background-color: #03a9f5;
}

.features .content .feature .text h3 {
  width: fit-content;
  margin: var(--mainMargin) auto;
  font-size: 30px;
  text-transform: capitalize;
  text-align: center;
  position: relative;
}

.features .content .feature .text p {
  padding: var(--mainPadding);
  text-align: center;
  font-size: 17px;
  color: var(--pTextColor);
  line-height: 1.7;
}

.features .content .feature .text a {
  display: block;
  padding: calc(var(--mainPadding) - 7px) var(--mainPadding);
  text-decoration: none;
  width: fit-content;
  margin: auto;
  text-transform: capitalize;
  font-size: 17px;
  font-weight: bold;
  border: solid 3px;
  border-radius: 7px;
  position: relative;
  overflow: hidden;
  transition-property: color;
  transition-duration: 0.5s;
  transition-timing-function: ease-in-out;
}

.features .content .feature .text a::after {
  content: "";
  position: absolute;
  top: -5px;
  left: -5px;
  height: calc(100% + 10px);
  width: 0%;
  z-index: -1;
  transition-property: width;
  transition-duration: 0.5s;
  transition-timing-function: ease-in-out;
}

.features .content .feature:hover .text a::after {
  width: calc(100% + 10px);
}

.features .content .feature:nth-of-type(1) .text a {
  color: var(--mainColor);
  border-color: var(--mainColor);
}

.features .content .feature:nth-of-type(2) .text a {
  color: #009788;
  border-color: #009788;
}

.features .content .feature:nth-of-type(3) .text a {
  color: #03a9f5;
  border-color: #03a9f5;
}

.features .content .feature:hover .text a {
  color: white;
}

.features .content .feature:nth-of-type(1) .text a::after {
  background-color: var(--mainColor);
}
.features .content .feature:nth-of-type(2) .text a::after {
  background-color: #009788;
}
.features .content .feature:nth-of-type(3) .text a::after {
  background-color: #03a9f5;
}
<section class="features container">
      <h2 class="main-heading">features</h2>
      <div class="content">
        <article class="feature">
          <div class="image">
            <img src="https://www.johnacademy.co.uk/wp-content/uploads/2017/08/O1-DIPLOMA-IN-SEO-AND-DIGITAL-MARKETING-2.jpg" alt="feature-01" />
          </div>
          <div class="text">
            <h3>quality</h3>
            <p>
              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae
              quaerat ipsam earum sit ex.
            </p>
            <a href="#">more</a>
          </div>
        </article>
        <article class="feature">
          <div class="image">
            <img src="https://www.statnews.com/wp-content/uploads/2019/10/AdobeStock_176822080-768x432.jpeg" alt="feature-02" />
          </div>
          <div class="text">
            <h3>time</h3>
            <p>
              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae
              quaerat ipsam earum sit ex.
            </p>
            <a href="#">more</a>
          </div>
        </article>
        <article class="feature">
          <div class="image">
            <img src="https://wp.inews.co.uk/wp-content/uploads/2018/06/wood-3157395-e1528392231169.jpg?resize=640,360&strip=all&quality=90" alt="feature-03" />
          </div>
          <div class="text">
            <h3>passion</h3>
            <p>
              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae
              quaerat ipsam earum sit ex.
            </p>
            <a href="#">more</a>
          </div>
        </article>
      </div>
    </section>

enter image description here

css-transitions css html
1 Answers

i think position absolute was the problem so i changed it to relative, it is broken when the page gets too small or too big but managing that is very easy so i believe you can do that your self(use breakPoints

/* Main Heading */
h2.main-heading {
  width: fit-content;
  padding: var(--mainPadding);
  margin: auto;
  text-transform: uppercase;
  font-size: 27px;
  border: solid 3px black;
  position: relative;
  transition-property: color, border-color;
  transition-duration: 0.5s;
  transition-delay: 0.3s;
  transition-timing-function: ease-in-out;
  margin-bottom: var(--sectionMarginPadding);
  z-index: 3;
}

h2.main-heading:hover {
  border-color: white;
  color: white;
}

h2.main-heading::before,
h2.main-heading::after {
  content: "";
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background-color: var(--mainColor);
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: -1;
  transition-property: left, right, width, height, border-radius;
  transition-duration: 0.5s, 0.5s, 0.3s;
  transition-timing-function: ease-in-out;
  transition-delay: 0, 0, 0.5s;
}
h2.main-heading::before {
  left: -37px;
}
h2.main-heading::after {
  right: -37px;
}

h2.main-heading:hover::before,
h2.main-heading:hover::after {
  width: calc(50% + 1px);
  height: calc(100% + 1px);
  border-radius: 0;
}
h2.main-heading:hover::before {
  left: 0;
}
h2.main-heading:hover::after {
  right: 0;
}

/* **************************************** Variables ***************************************** */
:root {
  --mainPadding: 17px;
  --mainMargin: 30px;
  --sectionMarginPadding: 70px;
  --mainColor: #953553; /* #2196f3 */
  --grayC: #ccc;
  --landingColor: #ececec;
  --pTextColor: #777;
}

/* **************************************** Global Rules ***************************************** */
html {
  scroll-behavior: smooth;
}

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

body {
  font-family: "Cairo", sans-serif;
}

.container {
  /* background-color: #ddd; */
  padding-left: var(--mainPadding);
  padding-right: var(--mainPadding);
  margin-left: auto;
  margin-right: auto;
  /* width: var(--containerWidth); */
}


/* *********************************** Features *********************************** */
.features {
  padding: var(--sectionMarginPadding) 0;
}

.features .content {
  display: grid;

  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: var(--mainMargin);
}

.features .content .feature {
  overflow: hidden;

  border: solid 1px var(--grayC);
  padding-bottom: var(--mainMargin);
}

.features .content .feature .image::before {
  content: "";
  position: relative !important;
  bottom: -90px;
  right: 30px;
  border-color: transparent transparent white transparent;
  border-style: solid;
  border-width: 10px 10px 171px 450px;
  z-index: 2;
  transition-property: border-width;
  transition-duration: 0.5s;
  transition-timing-function: ease-in-out;
}

.features .content .feature:hover .image::before {
  border-width: 171px 500px 171px 0;
}


.features .content .feature .image {

  position: relative;
  left: 0;
  top: 0;
  z-index: -2;
  overflow: hidden;
}
.features .content .feature .image::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0.7;
}

.features .content .feature img {
  display: block;
  max-width: 100%;
}

.features .content .feature:nth-of-type(1) .image::after {
  background-color: var(--mainColor);
}

.features .content .feature:nth-of-type(1) h3::after {
  content: "";
  position: absolute;
  bottom: -17px;
  left: 50%;
  transform: translateX(-50%);
  width: 80%;
  height: 7px;
  background-color: var(--mainColor);
}

.features .content .feature:nth-of-type(2) .image::after {
  background-color: #009788;
}

.features .content .feature:nth-of-type(2) h3::after {
  content: "";
  position: absolute;
  bottom: -17px;
  left: 50%;
  transform: translateX(-50%);
  width: 80%;
  height: 7px;
  background-color: #009788;
}

.features .content .feature:nth-of-type(3) .image::after {
  background-color: #03a9f5;
}

.features .content .feature:nth-of-type(3) h3::after {
  content: "";
  position: absolute;
  bottom: -17px;
  left: 50%;
  transform: translateX(-50%);
  width: 80%;
  height: 7px;
  background-color: #03a9f5;
}

.features .content .feature .text h3 {
  width: fit-content;
  margin: var(--mainMargin) auto;
  font-size: 30px;
  text-transform: capitalize;
  text-align: center;
  position: relative;
}

.features .content .feature .text p {
  padding: var(--mainPadding);
  text-align: center;
  font-size: 17px;
  color: var(--pTextColor);
  line-height: 1.7;
}

.features .content .feature .text a {
  display: block;
  padding: calc(var(--mainPadding) - 7px) var(--mainPadding);
  text-decoration: none;
  width: fit-content;
  margin: auto;
  text-transform: capitalize;
  font-size: 17px;
  font-weight: bold;
  border: solid 3px;
  border-radius: 7px;
  position: relative;
  overflow: hidden;
  transition-property: color;
  transition-duration: 0.5s;
  transition-timing-function: ease-in-out;
}

.features .content .feature .text a::after {
  content: "";
  position: absolute;
  top: -5px;
  left: -5px;
  height: calc(100% + 10px);
  width: 0%;
  z-index: -1;
  transition-property: width;
  transition-duration: 0.5s;
  transition-timing-function: ease-in-out;
}

.features .content .feature:hover .text a::after {
  width: calc(100% + 10px);
}

.features .content .feature:nth-of-type(1) .text a {
  color: var(--mainColor);
  border-color: var(--mainColor);
}

.features .content .feature:nth-of-type(2) .text a {
  color: #009788;
  border-color: #009788;
}

.features .content .feature:nth-of-type(3) .text a {
  color: #03a9f5;
  border-color: #03a9f5;
}

.features .content .feature:hover .text a {
  color: white;
}

.features .content .feature:nth-of-type(1) .text a::after {
  background-color: var(--mainColor);
}
.features .content .feature:nth-of-type(2) .text a::after {
  background-color: #009788;
}
.features .content .feature:nth-of-type(3) .text a::after {
  background-color: #03a9f5;
}
<section class="features container">
    <h2 class="main-heading">features</h2>
    <div class="content">
      <article class="feature">
        <div class="image">
          <img src="https://www.johnacademy.co.uk/wp-content/uploads/2017/08/O1-DIPLOMA-IN-SEO-AND-DIGITAL-MARKETING-2.jpg" alt="feature-01" />
        </div>
        <div class="text">
          <h3>quality</h3>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae
            quaerat ipsam earum sit ex.
          </p>
          <a href="#">more</a>
        </div>
      </article>
      <article class="feature">
        <div class="image">
          <img src="https://www.statnews.com/wp-content/uploads/2019/10/AdobeStock_176822080-768x432.jpeg" alt="feature-02" />
        </div>
        <div class="text">
          <h3>time</h3>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae
            quaerat ipsam earum sit ex.
          </p>
          <a href="#">more</a>
        </div>
      </article>
      <article class="feature">
        <div class="image">
          <img src="https://wp.inews.co.uk/wp-content/uploads/2018/06/wood-3157395-e1528392231169.jpg?resize=640,360&strip=all&quality=90" alt="feature-03" />
        </div>
        <div class="text">
          <h3>passion</h3>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae
            quaerat ipsam earum sit ex.
          </p>
          <a href="#">more</a>
        </div>
      </article>
    </div>
  </section>

)

Arash Seifi0
Related