Inputting Codepen code - need help!

Hello!

I am not strong at coding, but I am trying to create an effect where a unique image pops up next to the cursor upon hovering over a specific text button. This is the link to the Codepen effect I am trying to input: https://codepen.io/coreDeiv/pen/YzqzRKK

I have tried doing it in dev mode using the onMousein(), and I have also tried inputting as a custom element but I can’t seem to get it to work. Here is the full code I am trying to input:

* { margin: 0; padding: 0; box-sizing: border-box; }
  body, 
  html { 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    width: 100%; 
    height: auto; 
    min-height: 100vh; 
    font-family: 'Cormorant Garamond', serif; 
    font-weight: 300; 
    overflow: hidden; 
  } 

  body::before { 
    position: absolute; 
    content: ''; 
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0; 
    width: 100%; 
    height: 100vh; 
    background-image: linear-gradient(90deg, rgba(0, 0, 0, .3), rgba(0, 0, 0, .3)), url(https://github.com/coreDeiv/reveal-and-follow-image-on-text-hover/blob/master/bg-img.jpg?raw=true); 
    background-size: cover; 
    background-position: center; 
    background-repeat: no-repeat; 
    z-index: -1; 
  } 

  a { 
    text-decoration: none; 
    font-size: 3rem; 
    color: #000; 
    overflow: hidden; 
    transition: ease .5s all; 
    display: block; 
    margin: .5rem 0; 
    z-index: 2; 
    padding: 15px 30px 15px 90px; 
    text-shadow: 3px 5px 10px rgba(255, 255, 255, 1); 
  } 

  a:hover h1 { 
    transition: ease .5s all; 
    padding-left: 1rem; 
    color: #ccc; 
    text-shadow: 3px 5px 10px rgba(0, 0, 0, 1); 
  } 

  a:hover .follow-img { 
    opacity: 1; 
  } 

  .follow-img { 
    opacity: 0; 
    width: 100%; 
    height: auto; 
    max-width: 400px; 
    box-sizing: border-box; 
    transition: ease .2s; 
    position: absolute; 
    transform: translate(-50%, -50%); 
    z-index: -1; 
    object-fit: cover; 
  } 
</style> 

coreDeiv

img-cover
<script> 
  'use strict' 
  var cursor = document.querySelector(".follow-img"); 
  document.addEventListener("mousemove", (e) => { 
    var x = e.clientX; 
    var y = e.clientY; 
    cursor.style.left = `${x}px`; 
    cursor.style.top = `${y}px`; 
  }) 
</script> 

Can someone please point me in the right direction here? I’ve hit a road block and can’t seem to get past it. :frowning:

Kindly appreciated! Thank you!!!

code working perfectly for me with iFrame

you can use it and change the media for your own project inside the code itself

as for the Velo related query, I think it would be better to reach out to our Velo forum

in case or Editor X alternative, you can use hover interactions

Hey Andrew! Thanks for the response.

When you put the iFrame in, which code specifically did you use so that it fit the HTTPS guideline?

I’m using same code you’ve shared, no changes done, working well on live site