Skip to content

Instantly share code, notes, and snippets.

@elicus

elicus/Text over an image on hover.css

Created November 20, 2020 06:38
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save elicus/ed88c5e258734a398ad5fd84e72cb081 to your computer and use it in GitHub Desktop.
Save elicus/ed88c5e258734a398ad5fd84e72cb081 to your computer and use it in GitHub Desktop.
Download ZIP
Text over an image on hover
Raw
Text over an image on hover.css
.clip-image-hover p {
transition: background-image 300ms ease 0ms;
background-repeat: no-repeat;
background-position: left;
background-size: cover;
-webkit-background-clip: text;
-webkit-text-fill-color: #FFFFF;
}
.clip-image-hover p:hover {
background-repeat: no-repeat;
background-position: center;
background-size: cover;
background-image: url('Input Image URL');
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment