Reveal image on hover of text link

Site URL: http://www.coltoncreative.com.au

Hey there!

I'm trying to add an image reveal on the  'brand, web and print' links on the homepage, similar to the below link:

https://tympanus.net/Development/RapidImageHoverMenuEffects/index2.html

Site URL: www.coltoncreative.com.au

PW: Colton0822

Any help is much appreciated ☺️ thank you!

Hi. You can achieve similar by using Portfolio Page

Heres the codepen:

html

<img src="">
<ul>
  <li class="item" data-image="https://ct112013.files.wordpress.com/2013/07/pasteeel.jpg">WOMAN</li>
  <li class="item" data-image="https://i.pinimg.com/736x/1a/e9/ff/1ae9ff68eddb75113cc797f1324515b9--color-coordination-reiss.jpg">MAN</li>
  <li class="item" data-image="http://www.todaysparent.com/wp-content/uploads/2014/02/Mint1.jpg">KID</li>
</ul>
 

<style>

html, body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  width: 100vw;
  height: 100vh;
  background-color: #ffebd5;
  display: flex;
  justify-content: center;
  align-items: center;
}

ul {
  list-style: none;
  padding: 0;
  margin: 0;
  position: relative;
}
ul li {
  font-family: "Belleza", sans-serif;
  position: relative;
  font-size: 80px;
  text-align: center;
  -webkit-text-stroke: 1px black;
  color: transparent;
  margin-bottom: 40px;
  z-index: 1;
}

img {
  position: absolute;
  width: 30%;
  object-fit: contain;
  transform: translateX(-50%) translateY(-50%);
  top: 50%;
  left: 50%;
  z-index: 10;
}

</style>

<script>

const items = document.querySelectorAll('.item')
const image = document.querySelector('img')

items.forEach((el) => {
  el.addEventListener('mouseover', (e) => {
    imageData = e.target.getAttribute('data-image')
    console.log(imageData)
    e.target.style.zIndex = 99
    image.setAttribute('src', imageData)
  })
  el.addEventListener('mousemove', (e) => {
    image.style.top = e.clientY + 'px'
    image.style.left = e.clientX + 'px'
  })
  el.addEventListener('mouseleave', (e) => {
    e.target.style.zIndex = 1
    image.setAttribute('src', '')
  })
})

</script>

url

www.grahamcerceo.com/home-1

pw: boom

Im replying to my own thread lolz. @tuanphan let me know if this makes sense below. 

So I was able to get the codepen to work, with their images... however, theres some issues now that I see with not defining ul & li classes to those images (when I go and add block, the templates with images are all screwed up, I assume because Im messing with SS list code?

how can I fix the ul/li issue so I dont screw up the rest of my site's lists, and how can I make sure this section works properly and I can save it to implement on my actual index page?

Change your code to this

<img src="">
<ul class="t-list">
  <li class="item" data-image="https://ct112013.files.wordpress.com/2013/07/pasteeel.jpg">WOMAN</li>
  <li class="item" data-image="https://i.pinimg.com/736x/1a/e9/ff/1ae9ff68eddb75113cc797f1324515b9--color-coordination-reiss.jpg">MAN</li>
  <li class="item" data-image="http://www.todaysparent.com/wp-content/uploads/2014/02/Mint1.jpg">KID</li>
</ul>
 

<style>
ul.t-list {
  list-style: none;
  padding: 0;
  margin: 0;
  position: relative;
}
ul.t-list li {
  font-family: "Belleza", sans-serif;
  position: relative;
  font-size: 80px;
  text-align: center;
  -webkit-text-stroke: 1px black;
  color: transparent;
  margin-bottom: 40px;
  z-index: 1;
}

.t-list img {
  position: absolute;
  width: 30%;
  object-fit: contain;
  transform: translateX(-50%) translateY(-50%);
  top: 50%;
  left: 50%;
  z-index: 10;
}

</style>

 

<script>

const items = document.querySelectorAll('.item')
const image = document.querySelector('.t-list img')

items.forEach((el) => {
  el.addEventListener('mouseover', (e) => {
    imageData = e.target.getAttribute('data-image')
    console.log(imageData)
    e.target.style.zIndex = 99
    image.setAttribute('src', imageData)
  })
  el.addEventListener('mousemove', (e) => {
    image.style.top = e.clientY + 'px'
    image.style.left = e.clientX + 'px'
  })
  el.addEventListener('mouseleave', (e) => {
    e.target.style.zIndex = 1
    image.setAttribute('src', '')
  })
})


</script>