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>
<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.
Kindly appreciated! Thank you!!!