Inputting Codepen code - need help!

Ask the community
1

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!!!

2

code working perfectly for me with iFrame

1920×902 322 KB

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

3

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?

4

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