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>
3
Answers
we can get rid of the hassle of making the shape with borders and make it with clip-path property using the polygon shape function (I also made the design responsive, but the code snippet square screen is not taken under consideration, please open on full page display to see the result):
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
)
so i think i found out what is the problem, so when we apply border-width the element that we are applying it to is constantly moving so when you made the top border width to a high number i think that made the whole element expand so it made it move
i just removed the top border width :
border-width: 0px 500px 171px 0;