Как реализуется подобный hover?

Question

[Максим]

Как реализуется подобный hover эффект : www.sitehere.ru/category/css3 , при наведение на ссылку публикации ...

Answer 1

[Ivan Bogachev]

Идея примерно такая:

span {
    background: linear-gradient(to right, #ccc 0%, #ccc 50%, #fff 50%, #fff);
    background-size: 200% 100%;
    background-position: 100% 0;
    transition: background-position .5s cubic-bezier(.56,.08,.42,.7);
}

span:hover {
    background-position: 0 0;
}

codepen

Answer 2

[Александр]

https://codepen.io/palehin/pen/QqGLGO

Comments

[Максим]

да не в линию и без br

[Александр]

Максим Ленский, ну так сделай родителя меньшей ширины, чем ссылка и будет тебе не в линию

[Максим]

Александр, https://codepen.io/simkaUser/pen/eGBOWP так ?? смотрите сами ...

[Александр]

Максим Ленский, https://codepen.io/palehin/pen/wrowrq