Jump to content

Reveal image on hover of text link

Recommended Posts

  • 6 months later...

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>

Edited by gcerceo
amended code
Link to comment

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?

 

 

Edited by gcerceo
Link to comment

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>

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.