Actions

Work Header

Rating:
Archive Warning:
Category:
Fandom:
Additional Tags:
Language:
English
Stats:
Published:
2026-01-23
Completed:
2026-04-29
Words:
572
Chapters:
2/2
Comments:
28
Kudos:
241
Bookmarks:
200
Hits:
4,702

Hover to Translate Workskin for Text and Images

Summary:

A quick guide on how to code and use the hover to translate workskin. This feature allows readers to hover on a word or image and have it change into the translation.

If you use this and want to link back so other people can use it, too, that'd be awesome.

Chapter 1

Chapter Text

Hover (or click) on me!And look at me change!

This hover function can be used for a variety of fun story stuff, but I've found it particularly useful for translations. In order to use this, you'll need to create a workskin and put the following css inside:

#workskin .hover-word {
  position: relative;
  display: inline-block;
  cursor: pointer;
}

#workskin .original {
  display: inline;
}

#workskin .replacement {
  display: none;
}

#workskin .hover-word:hover .original {
  display: none;
}

#workskin .hover-word:hover .replacement {
  display: inline;
}

Then, use the following html for the words you want to translate:

<span class="hover-word"><span class="original">Original Word Here</span><span class="replacement">Replacement Word Here</span></span>

This can also be useful for multimedia options.

For instance, you can layer a still image over a gif to give the illusion of a video playing when the user hovers, like this:

gif previewanimated gif

#workskin .gif {
  max-width: 250px;
  width: 100%;
  height: auto;
  display: block;
  margin-top: 5px;
  cursor: pointer;
  border-radius: 4px;
}

#workskin .gif-static {
  max-width: 250px;
  width: 100%;
  height: auto;
  display: block;
  margin-top: 5px;
  cursor: pointer;
  border-radius: 4px;
}

#workskin .gif-static:hover {
  display: none;
}

#workskin .gif-container {
  position: relative;
  display: inline-block;
}

#workskin .gif-animated {
  display: none;
  max-width: 250px;
  width: 100%;
  height: auto;
  border-radius: 4px;
}

#workskin .gif-container:hover .gif-animated {
  display: block;
}

#workskin .gif-container:hover .gif-static {
  display: none;
}

You can change the max-width to suit your needs, but I've found 250 to be the most versatile for also being viewable on mobile. 

And that's it! Feel free to drop any questions in the comments.