How to add Codepen code my website?

@tuanphan  could you help implementing this code from codepen too?

https://codepen.io/elykdedelatorre/pen/zYdGoJz please TIA 🙏

On 10/13/2021 at 11:49 AM, KDT said:

@tuanphan  could you help implementing this code from codepen too?

https://codepen.io/elykdedelatorre/pen/zYdGoJz please TIA 🙏

Add this code to Code Block (You should find another code. I see the above Codepen code will conflict with some icons in toolbar in Editor Mode)

<section class="timeline">
  <div class="container">
    <div class="timeline-item">
      <div class="timeline-img"></div>

      <div class="timeline-content js--fadeInLeft">
        <h2>Title</h2>
        <div class="date">1 MAY 2016</div>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime ipsa ratione omnis alias cupiditate saepe atque totam aperiam sed nulla voluptatem recusandae dolor, nostrum excepturi amet in dolores. Alias, ullam.</p>
        <a class="bnt-more" href="javascript:void(0)">More</a>
      </div>
    </div> 

    <div class="timeline-item">

      <div class="timeline-img"></div>

      <div class="timeline-content timeline-card js--fadeInRight">
        <div class="timeline-img-header">
          <h2>Card Title</h2>
        </div>
        <div class="date">25 MAY 2016</div>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime ipsa ratione omnis alias cupiditate saepe atque totam aperiam sed nulla voluptatem recusandae dolor, nostrum excepturi amet in dolores. Alias, ullam.</p>
        <a class="bnt-more" href="javascript:void(0)">More</a>
      </div>

    </div>   

    <div class="timeline-item">

      <div class="timeline-img"></div>

      <div class="timeline-content js--fadeInLeft">
        <div class="date">3 JUN 2016</div>
        <h2>Quote</h2>
        <blockquote>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta explicabo debitis omnis dolor iste fugit totam quasi inventore!</blockquote>
      </div>
    </div>   

    <div class="timeline-item">

      <div class="timeline-img"></div>

      <div class="timeline-content js--fadeInRight">
        <h2>Title</h2>
        <div class="date">22 JUN 2016</div>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime ipsa ratione omnis alias cupiditate saepe atque totam aperiam sed nulla voluptatem recusandae dolor, nostrum excepturi amet in dolores. Alias, ullam.</p>
        <a class="bnt-more" href="javascript:void(0)">More</a>
      </div>
    </div>   

    <div class="timeline-item">

      <div class="timeline-img"></div>

      <div class="timeline-content timeline-card js--fadeInLeft">
        <div class="timeline-img-header">
          <h2>Card Title</h2>
        </div>
        <div class="date">10 JULY 2016</div>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime ipsa ratione omnis alias cupiditate saepe atque totam aperiam sed nulla voluptatem recusandae dolor, nostrum excepturi amet in dolores. Alias, ullam.</p>
        <a class="bnt-more" href="javascript:void(0)">More</a>
      </div>
    </div>   

    <div class="timeline-item">

      <div class="timeline-img"></div>

      <div class="timeline-content timeline-card js--fadeInRight">
        <div class="timeline-img-header">
          <h2>Card Title</h2>
        </div>
        <div class="date">30 JULY 2016</div>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime ipsa ratione omnis alias cupiditate saepe atque totam aperiam sed nulla voluptatem recusandae dolor, nostrum excepturi amet in dolores. Alias, ullam.</p>
        <a class="bnt-more" href="javascript:void(0)">More</a>
      </div>
    </div>  

    <div class="timeline-item">

      <div class="timeline-img"></div>

      <div class="timeline-content js--fadeInLeft">
        <div class="date">5 AUG 2016</div>
        <h2>Quote</h2>
        <blockquote>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta explicabo debitis omnis dolor iste fugit totam quasi inventore!</blockquote>
      </div>
    </div>   

    <div class="timeline-item">

      <div class="timeline-img"></div>

      <div class="timeline-content timeline-card js--fadeInRight">
        <div class="timeline-img-header">
          <h2>Card Title</h2>
        </div>
        <div class="date">19 AUG 2016</div>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime ipsa ratione omnis alias cupiditate saepe atque totam aperiam sed nulla voluptatem recusandae dolor, nostrum excepturi amet in dolores. Alias, ullam.</p>
        <a class="bnt-more" href="javascript:void(0)">More</a>
      </div>
    </div>  

    <div class="timeline-item">

      <div class="timeline-img"></div>

      <div class="timeline-content js--fadeInLeft">
        <div class="date">1 SEP 2016</div>
        <h2>Title</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime ipsa ratione omnis alias cupiditate saepe atque totam aperiam sed nulla voluptatem recusandae dolor, nostrum excepturi amet in dolores. Alias, ullam.</p>
        <a class="bnt-more" href="javascript:void(0)">More</a>
      </div>
    </div>   



  </div>
</section>

<style>
  .timeline {
  position: relative;
}
.timeline::before {
  content: "";
  background: #C5CAE9;
  width: 5px;
  height: 95%;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.timeline-item {
  width: 100%;
  margin-bottom: 70px;
}
.timeline-item:nth-child(even) .timeline-content {
  float: right;
  padding: 40px 30px 10px 30px;
}
.timeline-item:nth-child(even) .timeline-content .date {
  right: auto;
  left: 0;
}
.timeline-item:nth-child(even) .timeline-content::after {
  content: "";
  position: absolute;
  border-style: solid;
  width: 0;
  height: 0;
  top: 30px;
  left: -15px;
  border-width: 10px 15px 10px 0;
  border-color: transparent #f5f5f5 transparent transparent;
}
.timeline-item::after {
  content: "";
  display: block;
  clear: both;
}

.timeline-content {
  position: relative;
  width: 45%;
  padding: 10px 30px;
  border-radius: 4px;
  background: #f5f5f5;
  box-shadow: 0 20px 25px -15px rgba(0, 0, 0, 0.3);
}
.timeline-content::after {
  content: "";
  position: absolute;
  border-style: solid;
  width: 0;
  height: 0;
  top: 30px;
  right: -15px;
  border-width: 10px 0 10px 15px;
  border-color: transparent transparent transparent #f5f5f5;
}

.timeline-img {
  width: 30px;
  height: 30px;
  background: #3F51B5;
  border-radius: 50%;
  position: absolute;
  left: 50%;
  margin-top: 25px;
  margin-left: -15px;
}

a {
  background: #3F51B5;
  color: #FFFFFF;
  padding: 8px 20px;
  text-transform: uppercase;
  font-size: 14px;
  margin-bottom: 20px;
  margin-top: 10px;
  display: inline-block;
  border-radius: 2px;
  box-shadow: 0 1px 3px -1px rgba(0, 0, 0, 0.6);
}
a:hover, a:active, a:focus {
  background: #32408f;
  color: #FFFFFF;
  text-decoration: none;
}

.timeline-card {
  padding: 0 !important;
}
.timeline-card p {
  padding: 0 20px;
}
.timeline-card a {
  margin-left: 20px;
}

.timeline-item .timeline-img-header {
  background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4)), url("https://picsum.photos/1000/800/?random") center center no-repeat;
  background-size: cover;
}

.timeline-img-header {
  height: 200px;
  position: relative;
  margin-bottom: 20px;
}
.timeline-img-header h2 {
  color: #FFFFFF;
  position: absolute;
  bottom: 5px;
  left: 20px;
}

blockquote {
  margin-top: 30px;
  color: #757575;
  border-left-color: #3F51B5;
  padding: 0 20px;
}

.date {
  background: #FF4081;
  display: inline-block;
  color: #FFFFFF;
  padding: 10px;
  position: absolute;
  top: 0;
  right: 0;
}

@media screen and (max-width: 768px) {
  .timeline::before {
    left: 50px;
  }
  .timeline .timeline-img {
    left: 50px;
  }
  .timeline .timeline-content {
    max-width: 100%;
    width: auto;
    margin-left: 70px;
  }
  .timeline .timeline-item:nth-child(even) .timeline-content {
    float: none;
  }
  .timeline .timeline-item:nth-child(odd) .timeline-content::after {
    content: "";
    position: absolute;
    border-style: solid;
    width: 0;
    height: 0;
    top: 30px;
    left: -15px;
    border-width: 10px 15px 10px 0;
    border-color: transparent #f5f5f5 transparent transparent;
  }
}
</style>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/scrollreveal.js/3.3.1/scrollreveal.min.js"></script>
<script>
  $(function(){

  window.sr = ScrollReveal();

  if ($(window).width() < 768) {

  	if ($('.timeline-content').hasClass('js--fadeInLeft')) {
  		$('.timeline-content').removeClass('js--fadeInLeft').addClass('js--fadeInRight');
  	}

  	sr.reveal('.js--fadeInRight', {
	    origin: 'right',
	    distance: '300px',
	    easing: 'ease-in-out',
	    duration: 800,
	  });

  } else {
  	
  	sr.reveal('.js--fadeInLeft', {
	    origin: 'left',
	    distance: '300px',
		  easing: 'ease-in-out',
	    duration: 800,
	  });

	  sr.reveal('.js--fadeInRight', {
	    origin: 'right',
	    distance: '300px',
	    easing: 'ease-in-out',
	    duration: 800,
	  });

  }
  
  sr.reveal('.js--fadeInLeft', {
	    origin: 'left',
	    distance: '300px',
		  easing: 'ease-in-out',
	    duration: 800,
	  });

	  sr.reveal('.js--fadeInRight', {
	    origin: 'right',
	    distance: '300px',
	    easing: 'ease-in-out',
	    duration: 800,
	  });


});

</script>

@tuanphan, would you help me to implement this code from codepen too? Its the moving text on scroll 🙂

https://codepen.io/chriscoyier/pen/qeZwRb

Thank you!

On 10/22/2021 at 11:53 PM, gretchenf said:

@tuanphan, would you help me to implement this code from codepen too? Its the moving text on scroll 🙂

https://codepen.io/chriscoyier/pen/qeZwRb

 

Thank you!

Add a Code Block

<div class="ss">
<p>LANSING, Mich. — Sure, you could wear a campaign button. But a photo with the candidate is so much more versatile: suitable for avatars, posting with a clever hashtag, even printing out and framing if you want to go analog.</p>

<p>Posing for the camera with a presidential candidate used to be a perk generally reserved for wealthy donors. At Senator Elizabeth Warren’s events, all it costs is passing some time in a well-organized selfie* line.</p>

<svg width="100%" height="160px" viewBox="0 0 1098.72 89.55">
  <path id="curve" fill="transparent" d="M0.17,0.23c0,0,105.85,77.7,276.46,73.2s243.8-61.37,408.77-54.05c172.09,7.64,213.4,92.34,413.28,64.19"></path>
  <text width="100%" style="transform:translate3d(0,0,0);">
      <textPath style="transform:translate3d(0,0,0);" alignment-baseline="top" xlink:href="#curve" startOffset="1200px" id="text-path">*The pictures are not technically selfies.</textPath>
  </text>
</svg>

<p>At a recent event in Lansing, a small army of campaign staff members — working like a factory assembly line that hums along — helped usher voters through their encounter with Ms. Warren in eight key steps.</p>

<p>Since entering the presidential race, Ms. Warren has taken pictures with more than 38,000 people, her campaign estimates. Ms. Warren says the photos are part of her effort to build what she likes to call a “grass-roots movement.”</p>

<p>“It’s how I make this real, person to person,” she said in an interview. “I know I won’t be able to shake the hand of every single person; I know I won’t be able to take a selfie with every single human being in this country. But I’m going to try.”</p></div>
<style>
  .ss p {
  max-width: 500px;
  margin: 0 auto 1rem;
}

text {
  fill: red;
  font-size: 30px;
}
</style>
<script>
  const textPath = document.querySelector("#text-path");

const h = document.documentElement, 
      b = document.body,
      st = 'scrollTop',
      sh = 'scrollHeight';

document.addEventListener("scroll", e => {
  let percent = (h[st]||b[st]) / ((h[sh]||b[sh]) - h.clientHeight) * 100;
  textPath.setAttribute("startOffset", (-percent * 40) + 1200)
});
</script>

Hello @tuanphan can you please help me add the following codepens as well?

1)https://codepen.io/electerious/pen/MQrRxX
I tried it on a drop-down-button on my page but failed totally...

2)https://codepen.io/amit_sheen/pen/af022e80f75789c6b80a8d0eb718f890

Thank you!

On 10/26/2021 at 1:38 AM, tan-flatworm said:

Hello @tuanphan can you please help me add the following codepens as well?

1)https://codepen.io/electerious/pen/MQrRxX
I tried it on a drop-down-button on my page but failed totally...

 

2)https://codepen.io/amit_sheen/pen/af022e80f75789c6b80a8d0eb718f890

 

Thank you!

#1. Add a Code Block

<button class="button ss">
	<span>Hover me I'm awesome</span>
</button>
<style>
  .ss.button {
  position: relative;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background: #f72359;
  padding: 1em 2em;
  border: none;
  color: white;
  font-size: 1.2em;
  cursor: pointer;
  outline: none;
  overflow: hidden;
  border-radius: 100px;
}
.ss.button span {
  position: relative;
  pointer-events: none;
}
.ss.button::before {
  --size: 0;
  content: "";
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--size);
  height: var(--size);
  background: radial-gradient(circle closest-side, #4405f7, transparent);
  transform: translate(-50%, -50%);
  transition: width 0.2s ease, height 0.2s ease;
}
.ss.button:hover::before {
  --size: 400px;
}
</style>
<script>
  document.querySelector('.button').onmousemove = e => {

  const x = e.pageX - e.target.offsetLeft;
  const y = e.pageY - e.target.offsetTop;

  e.target.style.setProperty('--x', `${x}px`);
  e.target.style.setProperty('--y', `${y}px`);

};
</script>

#2. Add a Code Block

<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>

<div class="content">
  <div class="text"></div>
</div>
<style>
  .cell {
  width: 100%;
  height: 100%;
  z-index: 2;
}

.cell:nth-child(1):hover ~ .content {
  --partialString: "L";
  --size: 32px;
  --color: #fff;
}

.cell:nth-child(2):hover ~ .content {
  --partialString: "Lo";
  --size: 32px;
  --color: #fff;
}

.cell:nth-child(3):hover ~ .content {
  --partialString: "Lor";
  --size: 32px;
  --color: #fff;
}

.cell:nth-child(4):hover ~ .content {
  --partialString: "Lore";
  --size: 32px;
  --color: #fff;
}

.cell:nth-child(5):hover ~ .content {
  --partialString: "Lorem";
  --size: 32px;
  --color: #fff;
}

.cell:nth-child(6):hover ~ .content {
  --partialString: "Lorem ";
  --size: 32px;
  --color: #fff;
}

.cell:nth-child(7):hover ~ .content {
  --partialString: "Lorem i";
  --size: 32px;
  --color: #fff;
}

.cell:nth-child(8):hover ~ .content {
  --partialString: "Lorem ip";
  --size: 32px;
  --color: #fff;
}

.cell:nth-child(9):hover ~ .content {
  --partialString: "Lorem ips";
  --size: 32px;
  --color: #fff;
}

.cell:nth-child(10):hover ~ .content {
  --partialString: "Lorem ipsu";
  --size: 32px;
  --color: #fff;
}

.cell:nth-child(11):hover ~ .content {
  --partialString: "Lorem ipsum";
  --size: 32px;
  --color: #fff;
}

.cell:nth-child(12):hover ~ .content {
  --partialString: "Lorem ipsum ";
  --size: 32px;
  --color: #fff;
}

.cell:nth-child(13):hover ~ .content {
  --partialString: "Lorem ipsum d";
  --size: 32px;
  --color: #fff;
}

.cell:nth-child(14):hover ~ .content {
  --partialString: "Lorem ipsum do";
  --size: 32px;
  --color: #fff;
}

.cell:nth-child(15):hover ~ .content {
  --partialString: "Lorem ipsum dol";
  --size: 32px;
  --color: #fff;
}

.cell:nth-child(16):hover ~ .content {
  --partialString: "Lorem ipsum dolo";
  --size: 32px;
  --color: #fff;
}

.cell:nth-child(17):hover ~ .content {
  --partialString: "Lorem ipsum dolor";
  --size: 32px;
  --color: #fff;
}

.cell:nth-child(18):hover ~ .content {
  --partialString: "Lorem ipsum dolor ";
  --size: 32px;
  --color: #fff;
}

.cell:nth-child(19):hover ~ .content {
  --partialString: "Lorem ipsum dolor s";
  --size: 32px;
  --color: #fff;
}

.cell:nth-child(20):hover ~ .content {
  --partialString: "Lorem ipsum dolor si";
  --size: 32px;
  --color: #fff;
}

.cell:nth-child(21):hover ~ .content {
  --partialString: "Lorem ipsum dolor sit";
  --size: 32px;
  --color: #fff;
}

.cell:nth-child(22):hover ~ .content {
  --partialString: "Lorem ipsum dolor sit ";
  --size: 32px;
  --color: #fff;
}

.cell:nth-child(23):hover ~ .content {
  --partialString: "Lorem ipsum dolor sit a";
  --size: 32px;
  --color: #fff;
}

.cell:nth-child(24):hover ~ .content {
  --partialString: "Lorem ipsum dolor sit am";
  --size: 32px;
  --color: #fff;
}

.cell:nth-child(25):hover ~ .content {
  --partialString: "Lorem ipsum dolor sit ame";
  --size: 32px;
  --color: #fff;
}

.cell:nth-child(26):hover ~ .content {
  --partialString: "Lorem ipsum dolor sit amet";
  --size: 32px;
  --color: #fff;
}

.cell:nth-child(27):hover ~ .content {
  --partialString: "Lorem ipsum dolor sit amet ";
  --size: 32px;
  --color: #fff;
}

.cell:nth-child(28):hover ~ .content {
  --partialString: "Lorem ipsum dolor sit amet c";
  --size: 32px;
  --color: #fff;
}

.cell:nth-child(29):hover ~ .content {
  --partialString: "Lorem ipsum dolor sit amet co";
  --size: 32px;
  --color: #fff;
}

.cell:nth-child(30):hover ~ .content {
  --partialString: "Lorem ipsum dolor sit amet con";
  --size: 32px;
  --color: #fff;
}

.cell:nth-child(31):hover ~ .content {
  --partialString: "Lorem ipsum dolor sit amet cons";
  --size: 32px;
  --color: #fff;
}

.cell:nth-child(32):hover ~ .content {
  --partialString: "Lorem ipsum dolor sit amet conse";
  --size: 32px;
  --color: #fff;
}

.cell:nth-child(33):hover ~ .content {
  --partialString: "Lorem ipsum dolor sit amet consec";
  --size: 32px;
  --color: #fff;
}

.cell:nth-child(34):hover ~ .content {
  --partialString: "Lorem ipsum dolor sit amet consect";
  --size: 32px;
  --color: #fff;
}

.cell:nth-child(35):hover ~ .content {
  --partialString: "Lorem ipsum dolor sit amet consecte";
  --size: 32px;
  --color: #fff;
}

.cell:nth-child(36):hover ~ .content {
  --partialString: "Lorem ipsum dolor sit amet consectet";
  --size: 32px;
  --color: #fff;
}

.cell:nth-child(37):hover ~ .content {
  --partialString: "Lorem ipsum dolor sit amet consectetu";
  --size: 32px;
  --color: #fff;
}

.cell:nth-child(38):hover ~ .content {
  --partialString: "Lorem ipsum dolor sit amet consectetur";
  --size: 32px;
  --color: #fff;
}

.cell:nth-child(39):hover ~ .content {
  --partialString: "Lorem ipsum dolor sit amet consectetur ";
  --size: 32px;
  --color: #fff;
}

.cell:nth-child(40):hover ~ .content {
  --partialString: "Lorem ipsum dolor sit amet consectetur a";
  --size: 32px;
  --color: #fff;
}

.cell:nth-child(41):hover ~ .content {
  --partialString: "Lorem ipsum dolor sit amet consectetur ad";
  --size: 32px;
  --color: #fff;
}

.cell:nth-child(42):hover ~ .content {
  --partialString: "Lorem ipsum dolor sit amet consectetur adi";
  --size: 32px;
  --color: #fff;
}

.cell:nth-child(43):hover ~ .content {
  --partialString: "Lorem ipsum dolor sit amet consectetur adip";
  --size: 32px;
  --color: #fff;
}

.cell:nth-child(44):hover ~ .content {
  --partialString: "Lorem ipsum dolor sit amet consectetur adipi";
  --size: 32px;
  --color: #fff;
}

.cell:nth-child(45):hover ~ .content {
  --partialString: "Lorem ipsum dolor sit amet consectetur adipis";
  --size: 32px;
  --color: #fff;
}

.cell:nth-child(46):hover ~ .content {
  --partialString: "Lorem ipsum dolor sit amet consectetur adipisi";
  --size: 32px;
  --color: #fff;
}

.cell:nth-child(47):hover ~ .content {
  --partialString: "Lorem ipsum dolor sit amet consectetur adipisic";
  --size: 32px;
  --color: #fff;
}

.cell:nth-child(48):hover ~ .content {
  --partialString: "Lorem ipsum dolor sit amet consectetur adipisici";
  --size: 32px;
  --color: #fff;
}

.cell:nth-child(49):hover ~ .content {
  --partialString: "Lorem ipsum dolor sit amet consectetur adipisicin";
  --size: 32px;
  --color: #fff;
}

.cell:nth-child(50):hover ~ .content {
  --partialString: "Lorem ipsum dolor sit amet consectetur adipisicing";
  --size: 32px;
  --color: #fff;
}

.cell:nth-child(51):hover ~ .content {
  --partialString: "Lorem ipsum dolor sit amet consectetur adipisicing ";
  --size: 32px;
  --color: #fff;
}

.cell:nth-child(52):hover ~ .content {
  --partialString: "Lorem ipsum dolor sit amet consectetur adipisicing e";
  --size: 32px;
  --color: #fff;
}

.cell:nth-child(53):hover ~ .content {
  --partialString: "Lorem ipsum dolor sit amet consectetur adipisicing el";
  --size: 32px;
  --color: #fff;
}

.cell:nth-child(54):hover ~ .content {
  --partialString: "Lorem ipsum dolor sit amet consectetur adipisicing eli";
  --size: 32px;
  --color: #fff;
}

.cell:nth-child(55):hover ~ .content {
  --partialString: "Lorem ipsum dolor sit amet consectetur adipisicing elit";
  --size: 32px;
  --color: #fff;
}

.cell:nth-child(56):hover ~ .content {
  --partialString: "Lorem ipsum dolor sit amet consectetur adipisicing elit.";
  --size: 32px;
  --color: #fff;
}

.content {
  --partialString: "Hover over the screen to reveal the text...";
  --color: #333;
  --size: 16px;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  text-align: center;
  padding: 1em;
}

.text:after {
  content: var(--partialString);
  font-family: "Fredoka One", cursive;
  font-size: var(--size);
  color: var(--color);
}
</style>

On 10/27/2021 at 3:33 PM, tuanphan said:

#1. Add a Code Block

<button class="button ss">
	<span>Hover me I'm awesome</span>
</button>
<style>
  .ss.button {
  position: relative;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background: #f72359;
  padding: 1em 2em;
  border: none;
  color: white;
  font-size: 1.2em;
  cursor: pointer;
  outline: none;
  overflow: hidden;
  border-radius: 100px;
}
.ss.button span {
  position: relative;
  pointer-events: none;
}
.ss.button::before {
  --size: 0;
  content: "";
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--size);
  height: var(--size);
  background: radial-gradient(circle closest-side, #4405f7, transparent);
  transform: translate(-50%, -50%);
  transition: width 0.2s ease, height 0.2s ease;
}
.ss.button:hover::before {
  --size: 400px;
}
</style>
<script>
  document.querySelector('.button').onmousemove = e => {

  const x = e.pageX - e.target.offsetLeft;
  const y = e.pageY - e.target.offsetTop;

  e.target.style.setProperty('--x', `${x}px`);
  e.target.style.setProperty('--y', `${y}px`);

};
</script>

#2. Add a Code Block

<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>

<div class="content">
  <div class="text"></div>
</div>
<style>
  .cell {
  width: 100%;
  height: 100%;
  z-index: 2;
}

.cell:nth-child(1):hover ~ .content {
  --partialString: "L";
  --size: 32px;
  --color: #fff;
}

.cell:nth-child(2):hover ~ .content {
  --partialString: "Lo";
  --size: 32px;
  --color: #fff;
}

.cell:nth-child(3):hover ~ .content {
  --partialString: "Lor";
  --size: 32px;
  --color: #fff;
}

.cell:nth-child(4):hover ~ .content {
  --partialString: "Lore";
  --size: 32px;
  --color: #fff;
}

.cell:nth-child(5):hover ~ .content {
  --partialString: "Lorem";
  --size: 32px;
  --color: #fff;
}

.cell:nth-child(6):hover ~ .content {
  --partialString: "Lorem ";
  --size: 32px;
  --color: #fff;
}

.cell:nth-child(7):hover ~ .content {
  --partialString: "Lorem i";
  --size: 32px;
  --color: #fff;
}

.cell:nth-child(8):hover ~ .content {
  --partialString: "Lorem ip";
  --size: 32px;
  --color: #fff;
}

.cell:nth-child(9):hover ~ .content {
  --partialString: "Lorem ips";
  --size: 32px;
  --color: #fff;
}

.cell:nth-child(10):hover ~ .content {
  --partialString: "Lorem ipsu";
  --size: 32px;
  --color: #fff;
}

.cell:nth-child(11):hover ~ .content {
  --partialString: "Lorem ipsum";
  --size: 32px;
  --color: #fff;
}

.cell:nth-child(12):hover ~ .content {
  --partialString: "Lorem ipsum ";
  --size: 32px;
  --color: #fff;
}

.cell:nth-child(13):hover ~ .content {
  --partialString: "Lorem ipsum d";
  --size: 32px;
  --color: #fff;
}

.cell:nth-child(14):hover ~ .content {
  --partialString: "Lorem ipsum do";
  --size: 32px;
  --color: #fff;
}

.cell:nth-child(15):hover ~ .content {
  --partialString: "Lorem ipsum dol";
  --size: 32px;
  --color: #fff;
}

.cell:nth-child(16):hover ~ .content {
  --partialString: "Lorem ipsum dolo";
  --size: 32px;
  --color: #fff;
}

.cell:nth-child(17):hover ~ .content {
  --partialString: "Lorem ipsum dolor";
  --size: 32px;
  --color: #fff;
}

.cell:nth-child(18):hover ~ .content {
  --partialString: "Lorem ipsum dolor ";
  --size: 32px;
  --color: #fff;
}

.cell:nth-child(19):hover ~ .content {
  --partialString: "Lorem ipsum dolor s";
  --size: 32px;
  --color: #fff;
}

.cell:nth-child(20):hover ~ .content {
  --partialString: "Lorem ipsum dolor si";
  --size: 32px;
  --color: #fff;
}

.cell:nth-child(21):hover ~ .content {
  --partialString: "Lorem ipsum dolor sit";
  --size: 32px;
  --color: #fff;
}

.cell:nth-child(22):hover ~ .content {
  --partialString: "Lorem ipsum dolor sit ";
  --size: 32px;
  --color: #fff;
}

.cell:nth-child(23):hover ~ .content {
  --partialString: "Lorem ipsum dolor sit a";
  --size: 32px;
  --color: #fff;
}

.cell:nth-child(24):hover ~ .content {
  --partialString: "Lorem ipsum dolor sit am";
  --size: 32px;
  --color: #fff;
}

.cell:nth-child(25):hover ~ .content {
  --partialString: "Lorem ipsum dolor sit ame";
  --size: 32px;
  --color: #fff;
}

.cell:nth-child(26):hover ~ .content {
  --partialString: "Lorem ipsum dolor sit amet";
  --size: 32px;
  --color: #fff;
}

.cell:nth-child(27):hover ~ .content {
  --partialString: "Lorem ipsum dolor sit amet ";
  --size: 32px;
  --color: #fff;
}

.cell:nth-child(28):hover ~ .content {
  --partialString: "Lorem ipsum dolor sit amet c";
  --size: 32px;
  --color: #fff;
}

.cell:nth-child(29):hover ~ .content {
  --partialString: "Lorem ipsum dolor sit amet co";
  --size: 32px;
  --color: #fff;
}

.cell:nth-child(30):hover ~ .content {
  --partialString: "Lorem ipsum dolor sit amet con";
  --size: 32px;
  --color: #fff;
}

.cell:nth-child(31):hover ~ .content {
  --partialString: "Lorem ipsum dolor sit amet cons";
  --size: 32px;
  --color: #fff;
}

.cell:nth-child(32):hover ~ .content {
  --partialString: "Lorem ipsum dolor sit amet conse";
  --size: 32px;
  --color: #fff;
}

.cell:nth-child(33):hover ~ .content {
  --partialString: "Lorem ipsum dolor sit amet consec";
  --size: 32px;
  --color: #fff;
}

.cell:nth-child(34):hover ~ .content {
  --partialString: "Lorem ipsum dolor sit amet consect";
  --size: 32px;
  --color: #fff;
}

.cell:nth-child(35):hover ~ .content {
  --partialString: "Lorem ipsum dolor sit amet consecte";
  --size: 32px;
  --color: #fff;
}

.cell:nth-child(36):hover ~ .content {
  --partialString: "Lorem ipsum dolor sit amet consectet";
  --size: 32px;
  --color: #fff;
}

.cell:nth-child(37):hover ~ .content {
  --partialString: "Lorem ipsum dolor sit amet consectetu";
  --size: 32px;
  --color: #fff;
}

.cell:nth-child(38):hover ~ .content {
  --partialString: "Lorem ipsum dolor sit amet consectetur";
  --size: 32px;
  --color: #fff;
}

.cell:nth-child(39):hover ~ .content {
  --partialString: "Lorem ipsum dolor sit amet consectetur ";
  --size: 32px;
  --color: #fff;
}

.cell:nth-child(40):hover ~ .content {
  --partialString: "Lorem ipsum dolor sit amet consectetur a";
  --size: 32px;
  --color: #fff;
}

.cell:nth-child(41):hover ~ .content {
  --partialString: "Lorem ipsum dolor sit amet consectetur ad";
  --size: 32px;
  --color: #fff;
}

.cell:nth-child(42):hover ~ .content {
  --partialString: "Lorem ipsum dolor sit amet consectetur adi";
  --size: 32px;
  --color: #fff;
}

.cell:nth-child(43):hover ~ .content {
  --partialString: "Lorem ipsum dolor sit amet consectetur adip";
  --size: 32px;
  --color: #fff;
}

.cell:nth-child(44):hover ~ .content {
  --partialString: "Lorem ipsum dolor sit amet consectetur adipi";
  --size: 32px;
  --color: #fff;
}

.cell:nth-child(45):hover ~ .content {
  --partialString: "Lorem ipsum dolor sit amet consectetur adipis";
  --size: 32px;
  --color: #fff;
}

.cell:nth-child(46):hover ~ .content {
  --partialString: "Lorem ipsum dolor sit amet consectetur adipisi";
  --size: 32px;
  --color: #fff;
}

.cell:nth-child(47):hover ~ .content {
  --partialString: "Lorem ipsum dolor sit amet consectetur adipisic";
  --size: 32px;
  --color: #fff;
}

.cell:nth-child(48):hover ~ .content {
  --partialString: "Lorem ipsum dolor sit amet consectetur adipisici";
  --size: 32px;
  --color: #fff;
}

.cell:nth-child(49):hover ~ .content {
  --partialString: "Lorem ipsum dolor sit amet consectetur adipisicin";
  --size: 32px;
  --color: #fff;
}

.cell:nth-child(50):hover ~ .content {
  --partialString: "Lorem ipsum dolor sit amet consectetur adipisicing";
  --size: 32px;
  --color: #fff;
}

.cell:nth-child(51):hover ~ .content {
  --partialString: "Lorem ipsum dolor sit amet consectetur adipisicing ";
  --size: 32px;
  --color: #fff;
}

.cell:nth-child(52):hover ~ .content {
  --partialString: "Lorem ipsum dolor sit amet consectetur adipisicing e";
  --size: 32px;
  --color: #fff;
}

.cell:nth-child(53):hover ~ .content {
  --partialString: "Lorem ipsum dolor sit amet consectetur adipisicing el";
  --size: 32px;
  --color: #fff;
}

.cell:nth-child(54):hover ~ .content {
  --partialString: "Lorem ipsum dolor sit amet consectetur adipisicing eli";
  --size: 32px;
  --color: #fff;
}

.cell:nth-child(55):hover ~ .content {
  --partialString: "Lorem ipsum dolor sit amet consectetur adipisicing elit";
  --size: 32px;
  --color: #fff;
}

.cell:nth-child(56):hover ~ .content {
  --partialString: "Lorem ipsum dolor sit amet consectetur adipisicing elit.";
  --size: 32px;
  --color: #fff;
}

.content {
  --partialString: "Hover over the screen to reveal the text...";
  --color: #333;
  --size: 16px;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  text-align: center;
  padding: 1em;
}

.text:after {
  content: var(--partialString);
  font-family: "Fredoka One", cursive;
  font-size: var(--size);
  color: var(--color);
}
</style>