Slide on Mouse Hover Over Effect

Slide on Mouse Hover Over Effect Demo

View Demo Full Screen View Demo New Tab

Slide on Mouse Hover Over Effect Code

HTML

<h1>Hover Over My Text</h1>
<p>Lorem ipsum dolor sit amet, <a href="#!">consectetur adipiscing elit</a>. Duis rutrum sapien non ornare sagittis. Fusce quis dignissim felis. Pellentesque iaculis nisl et est ultricies, id mollis lorem volutpat. Praesent nec nunc vel quam facilisis scelerisque a ut orci. <a href="#!">Sed sed</a> enim vestibulum ex commodo venenatis vitae in mi. In eu velit sed nunc euismod tempor ac at odio. Mauris sit <a href="#!">amet mi ac turpis rutrum congue sit amet id nunc</a>.</p>

CSS

/* CSS mouse-out transition effect */
h1::before {  
  transform: scaleX(0);
  transform-origin: bottom right;
}

h1:hover::before {
  transform: scaleX(1);
  transform-origin: bottom left;
}

h1::before {
  content: " ";
  display: block;
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  inset: 0 0 0 0;
  background: hsl(200 100% 80%);
  z-index: -1;
  transition: transform .3s ease;
}

h1 {
  position: relative;
  font-size: 5rem;
}

/* apply the effect to a href links on the page */
a::before {  
  transform: scaleX(0);
  transform-origin: bottom right;
}

a:hover::before {
  transform: scaleX(1);
  transform-origin: bottom left;
}

a::before {
  content: " ";
  display: block;
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  inset: 0 0 0 0;
  background: rgba(255,255,255,0.4);
  z-index: -1;
  transition: transform .3s ease;
}

a {
  position: relative;
  color:#CCC;
}
p {
	color:#999;
}