Close Menu
    JavaScript

    How to make Hover to Reveal Password using HTML CSS & JavaScript

    Coding StellaBy No Comments6 Mins Read

    Let’s create a Hover to Reveal Password feature using HTML, CSS, and JavaScript. This functionality will allow users to temporarily reveal the hidden password when they hover over the input field, enhancing usability while maintaining security.

    We’ll use HTML to structure the form, CSS for basic styling, and JavaScript to handle the logic that toggles the password visibility on hover.

    Let’s get started on building the “Hover to Reveal Password” feature. Whether you’re a beginner or an experienced developer, this project offers a practical way to enhance web forms and improve user experience. Let’s make password fields more user-friendly!

    HTML :

    This HTML code creates a simple webpage that includes a password field with a label and a button to copy the password to the clipboard. The password field is read-only, meaning it cannot be edited, and its default value is “outer radius – padding.” There is also a span element that displays the text “Follow @coding.stella.” When hovered, additional styles and effects (managed through external CSS and JavaScript) can be applied to reveal or interact with the password, making the interface more dynamic and user-friendly.

    <!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>Hover to Reveal Password</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel="stylesheet" href="./style.css">

</head>
<body>

<div class="pass">
      <div class="pass__header">
        <label for="pass">Password</label>
        <button type="button" title="Copy to clipboard">
          <svg
            class="clipboard"
            viewBox="0 0 24 24"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              class="clipboard__board"
              d="M15.666 3.888a2.25022 2.25022 0 0 0-.808-1.18262A2.25011 2.25011 0 0 0 13.5 2.25h-3c-1.03 0-1.9.693-2.166 1.638m7.332 0c.055.194.084.4.084.612a.74983.74983 0 0 1-.2197.53033A.74987.74987 0 0 1 15 5.25H9a.75001.75001 0 0 1-.75-.75c0-.212.03-.418.084-.612m7.332 0c.646.049 1.288.11 1.927.184 1.1.128 1.907 1.077 1.907 2.185V19.5c0 .5967-.2371 1.169-.659 1.591a2.2504 2.2504 0 0 1-1.591.659H6.75a2.25023 2.25023 0 0 1-1.59099-.659A2.25015 2.25015 0 0 1 4.5 19.5V6.257c0-1.108.806-2.057 1.907-2.185a48.21804 48.21804 0 0 1 1.927-.184"
              stroke="currentColor"
              stroke-width="1.5"
              stroke-linecap="round"
              stroke-linejoin="round"
            ></path>
            <path
              class="clipboard__paper"
              d="M10.75 8H7.9375C7.42 8 7 8.41067 7 8.91667v9.16663c0 .506.42.9167.9375.9167h8.125c.5175 0 .9375-.4107.9375-.9167v-1.5277M10.75 8h5.3125C16.58 8 17 8.41067 17 8.91667v7.63893"
              stroke="currentColor"
              stroke-width="1.5"
              stroke-linecap="round"
              stroke-linejoin="round"
            ></path>
            <path
              class="clipboard__check"
              pathLength="1"
              d="m10.125 14.1146 1.25 1.2222 2.5-3.0556"
              stroke="currentColor"
              stroke-width="1.5"
              stroke-linecap="round"
              stroke-linejoin="round"
            ></path></svg>
        <span class="sr-only">Copy</span>
        </button>
      </div>
      <div class="pass__input">
        <input
          type="text"
          readonly
          id="pass"
          value="outer radius - padding"
          class="sr-only"
        />
        <span aria-hidden="true" class="fader">Follow @coding.stella</span>
      </div>
    </div>

  <script type="module" src="./script.js"></script>

</body>
</html>

    CSS :

    This CSS file styles a webpage with a focus on a dark theme, modern layout, and animations. It uses variables for font sizes, animation speeds, and colors, which make it easier to adjust the design. The body is centered with a minimalistic grid layout, and a grid background is applied using linear gradients. Selection color customization is added using ::selection.

    The .pass section handles password input styling with a label, button, and password field. The button includes an SVG icon for clipboard functionality, with hover and focus effects. The hover animations reveal and smooth transitions for elements like text blur and clipboard icons. The sr-only class ensures certain elements are visually hidden but accessible to screen readers. Overall, the design is responsive, visually appealing, and accessible.

    @import "normalize.css";

html {
	color-scheme: dark only;
}

:root {
  --font-size: clamp(1rem, 2vw + 1rem, 5rem);
  --speed: 0.25s;
  --accent: hsl(320 80% 50%);
}

body {
  min-height: 100vh;
  display: grid;
  place-items: center;
  font-family: 'SF Pro Text', 'SF Pro Icons', 'AOS Icons', 'Helvetica Neue', Helvetica, Arial, sans-serif, system-ui;
}

body::before {
	--line: color-mix(in lch, canvasText 25%, transparent);
	--size: 60px;
	content: "";
	height: 100vh;
	width: 100vw;
	position: fixed;
	background:
		linear-gradient(90deg, var(--line) 1px, transparent 1px var(--size)) 0 -5vmin / var(--size) var(--size),
		linear-gradient(var(--line) 1px, transparent 1px var(--size)) 0 -5vmin / var(--size) var(--size);
	-webkit-mask: linear-gradient(-15deg, transparent 60%, white);
	        mask: linear-gradient(-15deg, transparent 60%, white);
	top: 0;
	z-index: -1;
}

::-moz-selection {
  background: var(--accent);
}

::selection {
  background: var(--accent);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

.pass {
	display: flex;
	font-size: var(--font-size);
	flex-direction: column;
	gap: 0.25rem;
	font-family: monospace;
	max-width: calc(100% - 2rem);
}

.pass label {
	font-size: 0.5em;
	font-weight: 200;
	color: color-mix(in lch, canvasText 60%, transparent);
}

.pass__header {
	position: relative;
	display: flex;
	gap: 0.5rem;
	align-items: center;
}

[aria-hidden=true] {
	display: block;
	padding: 0.5em 0;
}

button {
	padding: 0;
	display: grid;
	place-items: center;
	height: 100%;
	aspect-ratio: 1;
	border-radius: 6px;
	border: 0;
	background: transparent;
	cursor: pointer;
	outline: 0;
	height: 44px;
	width: 44px;
	position: relative;
	color: color-mix(in lch, canvasText 60%, transparent);;
}

button:is(:focus-visible, :hover) {
	--active: 1;
}

button::after {
	content: "";
	position: absolute;
	inset: 0;
	background: color-mix(in lch, canvas 50%, hsl(0 0% 100% / 1));
	opacity: calc(0.25 * var(--active, 0));
	border-radius: 6px;
	transition: opacity 0.2s;
}

button svg {
	width: 65%;
}

.clipboard {
	--bg: canvas;
	--control: canvas;
	overflow: visible !important;
}

.clipboard > path {
	transform-box: fill-box;
	transform-origin: 50% 50%;
}

.clipboard__check {
	stroke-dasharray: 1;
	stroke-dashoffset: 1;
	transition: stroke-dashoffset 0.2s;
}

[data-copied=true] .clipboard__check {
	transition: stroke-dashoffset 0.2s 0.2s;
}

.clipboard__board {
	rotate: 5deg;
	translate: calc(20% + (var(--active, 0) * -5%)) -8%;
	fill: var(--bg);
}

.clipboard__paper {
	fill: var(--bg);
	translate: calc(-50% + (var(--active, 0) * 25%)) calc(25% - (var(--active, 0) * 10%));
	rotate: -5deg;
}

:is(.clipboard__paper, .clipboard__board) {
	transition: translate 0.2s, rotate 0.2s;
}

button:is(:hover, :focus-visible) :is(.clipboard__paper, .clipboard__board) {
	fill: var(--control);
}

[data-copied=true] :is(.clipboard__paper, .clipboard__board) {
	translate: 0 0;
	rotate: 0deg;
}

[data-copied=true] .clipboard__check {
	stroke-dashoffset: 0;
}

.whitespace {
	position: relative;
	padding: 0 4px;
}

.whitespace::after {
	content: "";
	height: 4px;
	bottom: 0;
	left: 0;
	right: 0;
	background: var(--accent);
	position: absolute;
}

.char, .whitespace {
	--speed: 5s;
  --blurriness: calc(var(--font-size) * 0.25);
  filter: blur(calc(var(--blur, 1) * var(--blurriness)));
  transition: filter var(--speed);
}
.char {
  display: inline-block;
  position: relative;
}

.char::before {
	content: "";
	position: absolute;
	inset: -2px;
}

:is(.char, .whitespace):hover {
  --blur: 0;
  --speed: 0.2s;
}

    JavaScript:

    This JavaScript code splits text into individual characters for animations using the splitting library, targeting elements with the class fader. It also enables clipboard functionality by copying the input field’s value to the clipboard when a button is clicked. After copying, a visual indication is shown for 5 seconds, using document.documentElement.dataset.copied to toggle the copied state.

    import splitting from 'https://cdn.skypack.dev/splitting';

const target = document.querySelectorAll('.fader');

splitting({
  target,
  by: 'chars' });


const copyToClipboard = async value => {
  try {
    await navigator.clipboard.writeText(value);
  } catch (error) {
    console.error(error);
  }
};

const copyMaster = document.querySelector('button');
let copyClear;
const copy = async () => {
  await copyToClipboard(document.querySelector('input').value);
  document.documentElement.dataset.copied = true;
  if (copyClear !== undefined) clearTimeout(copyClear);
  copyClear = setTimeout(() => {
    document.documentElement.dataset.copied = false;
  }, 5000);
};

copyMaster.addEventListener('click', copy);

    In conclusion, building a “Hover to Reveal Password” feature using HTML, CSS, and JavaScript has been a practical and useful project. By combining HTML for structure, CSS for styling, and JavaScript for functionality, we’ve enhanced the user experience by allowing passwords to be revealed on hover.

    If your project has problems, don’t worry. Just click to download the source code and face your coding challenges with excitement. Have fun coding!

    Share.

    Related Posts

    Add A Comment
    Leave A Reply