Weird text rendering

Question

I've some custom styled expanding diamond like containers, but the issue with the ones on the right seems to bother me a lot. The trouble with it is that when it is hovered and starts expanding the text on the right container starts dynamically to render based on the width of the expanding container, but the ones on the left side when hovered only uncover the text inside and the text inside is static. How can I achieve the same static uncovering text on the right container as it is on the left. Thank You in advance.

.gridContainer {
  display: grid;
  grid-template-columns: 5% 45% 45% 5%;
  grid-template-rows: repeat(4, auto);
  row-gap: 100px;
}

.main {
  grid-column: 2 / 3;
  overflow: hidden;
}

.main2 {
  grid-row: 2 / 3;
}

.main3 {
  grid-column: 3 / 4;
  transform: scaleX(-1);
}

.main3 .background {
  transform: scaleX(-1);
}

.main3 .background::before {
  width: 85%;
}

.test {
  z-index: 100;
  width: 400px;
  height: 100px;
  background-color: #67ade0;
  position: absolute;
  border-bottom-style: solid;
  border-color: #93cff1;
  border-width: 100px;
  clip-path: polygon(10% 0%, 5% 50%, 10% 100%, 5% 100%, 0% 50%, 5% 0%);
}

.background {
  display: inline-block;
  margin-left: 20px;
  width: 0px;
  height: 200px;
  background-color: #e1effa;
  clip-path: polygon(95% 0, 100% 50%, 95% 100%, 5% 100%, 0 50%, 5% 0);
  transition: width 6.5s, transform 5s;
  z-index: 10;
  opacity: 0.8;
}

.diamondStatic {
  margin-left: 20px;
  display: inline-block;
  position: absolute;
  height: 200px;
  width: 400px;
  background-color: #c4e0f5;
  clip-path: polygon(5% 0, 10% 50%, 5% 100%, 0% 50%);
}

.diamondAnimate {
  margin-left: -20px;
  display: inline-block;
  z-index: 100px;
  height: 200px;
  width: 400px;
  background-color: #c4e0f5;
  clip-path: polygon(5% 0, 10% 50%, 5% 100%, 0% 50%);
  transition: margin-left 6.5s, transform 5s;
}

.test:hover ~ .background {
  width: 400px;
}

.test:hover ~ .diamondAnimate {
  margin-left: -45px;
}

.background::after {
  margin-top: 10px;
  margin-left: 140px;
  position: absolute;
  content: 'Managed Services';
}

.background::before {
  width: 15%;
  margin-top: 50px;
  margin-left: 50px;
  position: absolute;
  content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla eget erat maximus, mattis ex sed, aliquet arcu. Maecenas eleifend ornare nulla, id placerat turpis pretium quis. Class aptent taciti sociosqu.';
}

.innerBtn {
  display: inline;
  position: absolute;
  margin-top: 150px;
  margin-left: 160px;
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <title>Document</title>
  </head>
  <body>
    <div class="gridContainer">
      <div class="main">
        <div class="test"></div>
        <div class="diamondStatic"></div>
        <span class="background">
          <button class="innerBtn">CLICK ME</button>
        </span>
        <div class="diamondAnimate"></div>
      </div>

      <div class="main main2">
        <div class="test"></div>
        <div class="diamondStatic"></div>
        <span class="background">
          <button class="innerBtn">CLICK ME</button>
        </span>
        <div class="diamondAnimate"></div>
      </div>

      <div class="main main3">
        <div class="test"></div>
        <div class="diamondStatic"></div>
        <span class="background">
          <button class="innerBtn">CLICK ME</button>
        </span>
        <div class="diamondAnimate"></div>
      </div>
    </div>
  </body>
</html>

PS: (Thanks to Titulum and his clarification) For people having issues with the diamond elements (or what they do), open the result in a full page and hover over the borders of the diamonds. Another element will gradually open, the issue is with the diamond on the right

Nick Jmakin · Accepted Answer

The animation on the left expands from left to right.

The width of the container is expanding in this same direction, this is why you are unable to see the text "wrapping".

Meanwhile, on the right all that needs to be done in order to prevent the text from "wrapping" is to add some static width to the .main3 .background::after pseudo-element.

Here's a pen with the fix ->

https://codepen.io/reallisticus/pen/gOevmge

.gridContainer {
  display: grid;
  grid-template-columns: 5% 45% 45% 5%;
  grid-template-rows: repeat(4, auto);
  row-gap: 100px;
}

.main {
  grid-column: 2 / 3;
  overflow: hidden
}

.main2 {
  grid-row: 2 / 3;
}

.main3 {
  grid-column: 3 / 4;
  transform: scaleX(-1);
}

.main3 .background {
  transform: scaleX(-1);
}


.test {
  z-index: 100;
  width: 400px;
  height: 100px;
  background-color: #67ade0;
  position: absolute;
  border-bottom-style: solid;
  border-color: #93cff1;
  border-width: 100px;
  clip-path: polygon(10% 0%, 5% 50%, 10% 100%, 5% 100%, 0% 50%, 5% 0%);
}

.background {
  display: inline-block;
  margin-left: 20px;
  width: 0px;
  height: 200px;
  background-color: #e1effa;
  clip-path: polygon(95% 0, 100% 50%, 95% 100%, 5% 100%, 0 50%, 5% 0);
  transition: width 6.5s, transform 5s;
  z-index: 10;
  opacity: 0.8;
}



.diamondStatic {
  margin-left: 20px;
  display: inline-block;
  position: absolute;
  height: 200px;
  width: 400px;
  background-color: #c4e0f5;
  clip-path: polygon(5% 0, 10% 50%, 5% 100%, 0% 50%);
}

.diamondAnimate {
  margin-left: -20px;
  display: inline-block;
  z-index: 100px;
  height: 200px;
  width: 400px;
  background-color: #c4e0f5;
  clip-path: polygon(5% 0, 10% 50%, 5% 100%, 0% 50%);
  transition: margin-left 6.5s, transform 5s;
}

.test:hover~.background {
  width: 400px;
}

.test:hover~.diamondAnimate {
  margin-left: -45px;
}

.background::after {
  margin-top: 10px;
  margin-left: 140px;
  position: absolute;
  content: "Managed Services";
}

.background::before {
  width: 15%;
  margin-top: 50px;
  margin-left: 50px;
  position: absolute;
  content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla eget erat maximus, mattis ex sed, aliquet arcu. Maecenas eleifend ornare nulla, id placerat turpis pretium quis. Class aptent taciti sociosqu.";
}

.main3 .background::after {
  margin-top: 10px;
  margin-left: 140px;
  width: 300px;
  position: absolute;
  content: "Managed Services";
}

.main3 .background::before {
  content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla eget erat maximus, mattis ex sed, aliquet arcu. Maecenas eleifend ornare nulla, id placerat turpis pretium quis. Class aptent taciti sociosqu.";
  width: 300px;
  margin-top: 50px;
  margin-left: 50px;
  position: absolute;
}

.innerBtn {
  display: inline;
  position: absolute;
  margin-top: 150px;
  margin-left: 160px;
  width: 100px;
}

The only differences between this code and yours is the following:

enter image description here

Weird text rendering

Tags:

html

css

frontend

92Infinitus92

1 Answers

Nick Jmakin

Recent Activity

Donate For Us

Weird text rendering

Tags:

html

css

frontend

92Infinitus92

1 Answers

Nick Jmakin

Related questions

Recent Activity

Donate For Us