javascripthtmlcsstexteffect

How to change the color of the text that goes outside the block? JS/CSS

In this case, I have the background image and text. My text is white, but when there is a lot of text, some of it will go beyond the background image and it will not be visible. Please tell me how to make text that goes beyond the background image, the same color as the background image (blue)

Maybe there are solutions on css, maybe on js, any solutions will work. And I will also be grateful if you tell me the name of this effect.

something like this should come out: enter image description here

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box; }

a {
  text-decoration: none;
  padding: 0;
  margin: 0; }

a:active {
  text-decoration: none; }

a:visited {
  text-decoration: none; }

ul {
  list-style: none;
  padding: 0;
  margin: 0; }

body {
  font-size: 16px;
  font-family: 'Open Sans', sans-serif;
  font-weight: 400;
  color: #fff;
  cursor: default; }

html,
body {
  height: 100%; }

.container {
  max-width: 1180px;
  padding: 0 20px;
  margin: 0 auto; }

.wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100%; }

main {
  flex: 1 1 auto; }

.header {
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100%;
  z-index: 10;
  padding: 15px 0;
  -webkit-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
  background: #4a9428; }

.header--scrolled {
  background: #4a9428; }

.header--body {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center; }

.header--logo {
  cursor: pointer;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal; }

.header--logo img {
  display: block;
  width: auto;
  max-height: 36px; }

.logo--icon {
  margin-right: 10px; }

.logo--text {
  font-family: 'Roboto Slab', sans-serif;
  font-size: 32px;
  margin: 0;
  padding: 0;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #fff; }

.header--nav {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center; }

.nav--list a {
  font-family: 'Open Sans', sans-serif;
  font-size: 16px;
  font-weight: 500;
  color: #fff;
  -webkit-transition: all 0.1s linear;
  -o-transition: all 0.1s linear;
  transition: all 0.1s linear; }

.nav--list a:hover {
  color: #ffe600; }

.nav--list:not(:last-child) {
  margin-right: 30px; }

.nav--list-active {
  color: #ffe600; }

.button {
  padding: 8px 25px;
  background: transparent;
  border: 2px solid #ffe600;
  border-radius: 4px;
  -webkit-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
  font-family: 'Open Sans', sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.5;
  color: #ffe600;
  cursor: pointer; }

.burger-menu {
  display: none;
  top: 0px;
  right: 0px;
  z-index: 100; }

#menuToggle {
  display: block;
  position: relative;
  z-index: 100;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none; }

#menuToggle input {
  display: block;
  width: 48px;
  height: 30px;
  position: absolute;
  top: -4px;
  left: -4px;
  cursor: pointer;
  opacity: 0;
  z-index: 100;
  -webkit-touch-callout: none; }

#menuToggle span {
  display: block;
  width: 33px;
  height: 4px;
  margin-bottom: 5px;
  position: relative;
  background: #ffe600;
  border-radius: 3px;
  z-index: 1;
  -webkit-transform-origin: 4px 0px;
  -ms-transform-origin: 4px 0px;
  transform-origin: 4px 0px;
  -webkit-transition: background 0.5s cubic-bezier(0.77, 0.2, 0.05, 1), opacity 0.55s ease, -webkit-transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1);
  transition: background 0.5s cubic-bezier(0.77, 0.2, 0.05, 1), opacity 0.55s ease, -webkit-transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1);
  -o-transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1), background 0.5s cubic-bezier(0.77, 0.2, 0.05, 1), opacity 0.55s ease;
  transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1), background 0.5s cubic-bezier(0.77, 0.2, 0.05, 1), opacity 0.55s ease;
  transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1), background 0.5s cubic-bezier(0.77, 0.2, 0.05, 1), opacity 0.55s ease, -webkit-transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1); }

#menuToggle span:first-child {
  -webkit-transform-origin: 0% 0%;
  -ms-transform-origin: 0% 0%;
  transform-origin: 0% 0%; }

#menuToggle span:nth-last-child(2) {
  -webkit-transform-origin: 0% 100%;
  -ms-transform-origin: 0% 100%;
  transform-origin: 0% 100%; }

#menuToggle input:checked ~ span {
  opacity: 1;
  -webkit-transform: rotate(45deg) translate(-2px, -1px);
  -ms-transform: rotate(45deg) translate(-2px, -1px);
  transform: rotate(45deg) translate(-2px, -1px);
  background: #393939 !important; }

#menuToggle input:checked ~ span:nth-last-child(3) {
  opacity: 0;
  -webkit-transform: rotate(0deg) scale(0.2, 0.2);
  -ms-transform: rotate(0deg) scale(0.2, 0.2);
  transform: rotate(0deg) scale(0.2, 0.2); }

#menuToggle input:checked ~ span:nth-last-child(2) {
  opacity: 1;
  -webkit-transform: rotate(-45deg) translate(0, -1px);
  -ms-transform: rotate(-45deg) translate(0, -1px);
  transform: rotate(-45deg) translate(0, -1px); }

#menu {
  position: absolute;
  pointer-events: none;
  width: 440px;
  height: 200vh;
  margin: -100px 0 0 0;
  padding: 20px;
  padding-top: 130px;
  right: -100px;
  background: #fff;
  list-style-type: none;
  -webkit-font-smoothing: antialiased;
  -webkit-transform-origin: 0% 0%;
  -ms-transform-origin: 0% 0%;
  transform-origin: 0% 0%;
  -webkit-transform: translate(100%, 0);
  -ms-transform: translate(100%, 0);
  transform: translate(100%, 0);
  -webkit-transition: all 0.5s cubic-bezier(0.77, 0.2, 0.05, 1);
  -o-transition: all 0.5s cubic-bezier(0.77, 0.2, 0.05, 1);
  transition: all 0.5s cubic-bezier(0.77, 0.2, 0.05, 1);
  font-family: 'Poppins', sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: 20px;
  line-height: 24px;
  color: #2c2c2c;
  padding-right: 90px; }

#menuToggle input:checked ~ ul {
  -webkit-transform: none;
  -ms-transform: none;
  transform: none;
  opacity: 1; }

.backdrop {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.3);
  opacity: 0;
  -webkit-transition: opacity 0.1s ease-out;
  -o-transition: opacity 0.1s ease-out;
  transition: opacity 0.1s ease-out;
  pointer-events: none; }

.nav-box--link {
  display: block;
  padding: 12px 10px; }

.active {
  color: #ffe600 !important; }

.backdrop {
  position: fixed !important;
  left: 0;
  top: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.3);
  opacity: 0;
  -webkit-transition: opacity 0.1s ease-out;
  -o-transition: opacity 0.1s ease-out;
  transition: opacity 0.1s ease-out;
  pointer-events: none;
  position: relative; }

.burger-menu-link li {
  margin-bottom: 50px; }

.hero {
  padding: 80px 0; }
  .hero__body {
    position: relative;
    min-height: 1198px; }
  .hero__bg {
    position: relative;
    top: 155px;
    left: 50%;
    transform: translateX(-50%);
    height: 990px;
    width: auto; }
    .hero__bg img {
      width: 100%;
      height: 100%; }
  .hero__img {
    position: relative;
    z-index: 2;
    margin-top: -900px;
    width: 570px;
    height: 570px;
    overflow: hidden;
    border-radius: 50%; }
    .hero__img img {
      width: 100%;
      height: 100%;
      object-fit: cover; }
  .hero__content {
    position: relative;
    z-index: 3;
    color: #fff;
    padding: 30px;
    max-width: 623px;
    margin: -181px 153px 60px auto; }

.section-title {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 60px;
  margin-bottom: 20px; }

.section-text {
  font-family: 'Open Sans', sans-serif;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.8; }

.footer {
  color: #fff;
  background-color: #4a9428;
  padding: 60px 0 0; }

.footer--body {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column; }

.footer--top {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  margin: -12px;
  margin-bottom: 40px; }

.ft--items {
  -webkit-box-flex: 1;
  -ms-flex: 1 0 33%;
  flex: 1 0 33%;
  padding: 12px; }

.ft--left-item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start; }

.fli--logo {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  cursor: pointer; }

.fli--logo img {
  display: block;
  width: auto;
  max-height: 36px; }

.fli--logo-text {
  font-size: 28px;
  color: #fff; }

.fli--address {
  font-family: 'Open Sans', sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 24px;
  margin-bottom: 0;
  color: #fff;
  margin-bottom: 30px; }

.fli--phone-title {
  font-family: 'Open Sans', sans-serif;
  font-weight: 700;
  font-size: 14px;
  line-height: 24px;
  margin-bottom: 0;
  color: #fff; }

.fli--text {
  font-family: 'Open Sans', sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 24px;
  margin-bottom: 0;
  color: #fff; }

.fli--mail {
  font-family: 'Open Sans', sans-serif;
  font-weight: 700;
  font-size: 14px;
  line-height: 24px;
  margin-bottom: 0;
  color: #fff;
  margin-bottom: 20px; }

.fli--social {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex; }

.fli--social-item {
  display: block;
  line-height: 1;
  padding: 8px 0;
  border-radius: 4px;
  text-align: center;
  width: 36px;
  height: 36px;
  -webkit-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out; }

.fli--social-item:hover {
  background: #fff;
  text-decoration: none; }

.fli--social-item:hover i {
  color: #4a9428; }

.fli--social-item:not(:last-child) {
  margin-right: 8px; }

.fli--social-item i {
  font-size: 18px;
  color: #fff;
  -webkit-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out; }

.fci--list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start; }

.fci--link {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center; }

.fci--link span {
  font-family: 'Open Sans', sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 1;
  color: #fff; }

.fci--link span:hover {
  color: #ffe600; }

.fci--link:not(:last-child) {
  margin-bottom: 20px; }

.fci--link i {
  font-size: 12px;
  color: #ffe600;
  margin-right: 8px; }

.fri--title {
  font-family: 'Open Sans', sans-serif;
  font-weight: 600;
  font-size: 16px;
  line-height: 1.2;
  color: #fff;
  margin-bottom: 20px; }

.fri--text {
  font-family: 'Open Sans', sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.5;
  color: #fff; }

.footer--bottom {
  padding: 30px 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  border-top: 1px solid #fff;
  text-align: center;
  font-family: Roboto, sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.5;
  color: #fff; }

/*# sourceMappingURL=style.css.map */
<!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
    href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&family=Open+Sans:ital,wght@0,400;0,500;0,600;1,300&display=swap"
    rel="stylesheet">
  <script src="https://kit.fontawesome.com/1774739131.js?_v=20220513104519" crossorigin="anonymous"></script>
  <link rel="stylesheet" href="css/style.css">
  <title>Travel</title>
</head>

<body>

  <div class="wrapper">
    <header class="header">
      <div class="container">
        <div class="header--body">
          <div class="header--logo logo">
            <!--START BLOCK HeaderLogo-->
            <!-- <img src="img/organic-icon.svg" alt="{HeaderName-Seitename}" class="logo--icon"> -->
            <!--END BLOCK HeaderLogo-->

            <!--START BLOCK HeaderName-->
            <div class="logo--text">Organic</div>
            <!--END BLOCK HeaderName-->
          </div>
          <ul class="header--nav nav">
            <li class="nav--list">
              <a href="#s-hero" class="nav--link">Hero</a>
            </li>

            <!--START BLOCK Benefits-->
            <li class="nav--list">
              <a href="#s-about" class="nav--link">About</a>
            </li>
            <!-- END BLOCK Benefits-->

            <!--START BLOCK Recommendation-->
            <li class="nav--list">
              <a href="#s-products" class="nav--link">Products</a>
            </li>
            <!-- END BLOCK Recommendation-->

            <!--START BLOCK Goals-->
            <li class="nav--list">
              <a href="#s-sale" class="nav--link">Sale</a>
            </li>
            <!-- END BLOCK Goals-->

            <!--START BLOCK Recipes-->
            <li class="nav--list">
              <a href="#s-interesting" class="nav--link">Interesting</a>
            </li>
            <!-- END BLOCK Recipes-->
          </ul>
          <div class="burger-menu">
            <nav role='navigation'>
              <div id="menuToggle">
                <input id="showBtn" type="checkbox" />
                <span></span>
                <span></span>
                <span></span>
                <ul id="menu" class="nav-box">
                  <a class="nav-box--link" href="#s-hero">Hero</a>

                  <!--START BLOCK Benefits-->
                  <a class="nav-box--link" href="#s-about">About</a>
                  <!-- END BLOCK Benefits-->

                  <!--START BLOCK Recommendation-->
                  <a class="nav-box--link" href="#s-products">Products</a>
                  <!-- END BLOCK Recommendation-->

                  <!--START BLOCK Goals-->
                  <a class="nav-box--link" href="#s-sale">Sale</a>
                  <!-- END BLOCK Goals-->

                  <!--START BLOCK Recipes-->
                  <a class="nav-box--link" href="#s-interesting">Interesting</a>
                  <!-- END BLOCK Recipes-->
                </ul>
              </div>
              <div class="backdrop"></div>
            </nav>
          </div>
        </div>
      </div>
    </header>

    <main class="main">
      <section class="hero">
        <div class="container">
          <div class="hero__body">
            <div class="hero__bg">
              <img src="https://i.ibb.co/PQ3kr5Q/section-hero-bg.png" alt="section-hero-bg" border="0"/>
            </div>
            <div class="hero__img">
              <img src="https://i.ibb.co/zNSCFjh/hero-img.jpg" alt="hero-img" border="0" />
            </div>
            <div class="hero__content">
              <h1 class="hero__title section-title">Volcano Tours & Adventure Travel</h1>
              <div class="hero__text section-text">
                Lectus sit amet est placerat in egestas. Integer eget aliquet nibh praesent tristique magna sit. Congue
                quisque egestas diam in arcu cursus.
              </div>
            </div>
          </div>
        </div>
      </section>

    </main>

    <footer class="footer">
      <div class="container">
        <div class="footer--body">
          <div class="footer--top ft">
            <div class="ft--left-item fli ft--items">
              <div class="fli--logo">
                <!-- <img src="img/organic-icon.svg" alt="{HeaderName-Seitename}" class="logo--icon"> -->
                <div class="logo--text fli--logo-text">ORGANIC</div>
              </div>
              <div class="fli--address">
                A108 Adam Street
                NY 535022, USA
              </div>
              <div class="fli--phone">
                <span class="fli--phone-title">Phone:</span>
                <span class="fli--phone-text fli--text">+1 5589 55488 55</span>
              </div>
              <div class="fli--mail">
                <span class="fli--mail-title ">Email:</span>
                <span class="fli--phone-text fli--text">info@example.com</span>
              </div>
              <div class="fli--social">
                <a href="#" class="fli--social-item">
                  <i class="fa-brands fa-twitter"></i>
                </a>
                <a href="#" class="fli--social-item">
                  <i class="fa-brands fa-facebook"></i>
                </a>
                <a href="#" class="fli--social-item">
                  <i class="fa-brands fa-instagram"></i>
                </a>
                <a href="#" class="fli--social-item">
                  <i class="fa-brands fa-linkedin"></i>
                </a>
              </div>
            </div>
            <div class="ft--center-item fci ft--items">
              <ul class="fci--list">
                <a href="#s-hero" class="fci--link"><i class="fa-solid fa-angle-right"></i><span>Home</span></a>
                <a href="#s-benefits" class="fci--link"><i class="fa-solid fa-angle-right"></i><span>Benefits</span></a>
                <a href="#s-recommendation" class="fci--link"><i
                    class="fa-solid fa-angle-right"></i><span>Recommendation</span></a>
                <a href="#s-goals" class="fci--link"><i class="fa-solid fa-angle-right"></i><span>Goals</span></a>
                <a href="#s-recipes" class="fci--link"><i class="fa-solid fa-angle-right"></i><span>Recipes</span></a>
                <a href="impressum.html" class="fci--link"><i class="fa-solid fa-angle-right"></i><span>Impressum und
                    Datenschutzerklärung</span></a>
              </ul>
            </div>
            <div class="ft--right-item fri ft--items">
              <h4 class="fri--title">Footer Info</h4>
              <div class="fri--text">
                Ihre Website ist so programmiert, dass sie keine Cookies sammelt, deswegen brauchen Sie auch keine
                weiteren
                Zustimmungsfenstern für eine Zuslassung der Cookies. Das wird auch in ihrer - Ihre Website ist so
                programmiert, dass sie keine Cookies sammelt, deswegen brauchen Sie auch keine weiteren
                Zustimmungsfenstern
                für eine Zuslassung der Cookies. Das wird auch in ihrer
              </div>
            </div>
          </div>
          <div class="footer--bottom fb">
            <div class="fb--text">
              Deine Webseite - All Rights Reserved
            </div>
          </div>
        </div>
    </footer>
  </div>
</body>

</html>

Solution

  • You can try do it like this:

    .back {
  width: 150px;
  height: 150px;
  background-color: lightblue;
}

.text {
  position: absolute;
  width: 300px;
  top: 20px;
  left: 30px;
  font-size: 26px;
  color: lightblue;
  mix-blend-mode: screen;
}
    <div class = 'back'></div>
<div class = 'text'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus euismod blandit sem, nec lobortis eros.</div>