Как плавно сменить фон у блока из спрайта при наведении?

Question

[weranda]

Приветствую.
Есть SVG-спрайт и надо как-то сделать плавный переход от одного элемента спрайта к другому, не линейный переход когда видно, как картинка смещается (это есть в примере), а по типу плавного появления/исчезновения при наведении (картинка плавно исчезает, а на её место плавно появляется другая, что-то по типу анимацмм fade-in). Подобный переход есть у текста.
Пример тут.

Comments

[Максим]

svg то где ?

[weranda]

Максим Ленский, Я SVG перевел в datauri в backgroung-image, а вообще, вот код SVG:

<svg width="40" height="20" viewBox="0 0 40 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="20" height="20" fill="#FF0809"/>
<rect x="20" width="20" height="20" fill="#0400D9"/>
</svg>

[Максим]

weranda, проверь

.title:before {
	content: '';
	width: 20px;
	height: 20px;
	display: block;
	background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgMCA0MCAyMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3Qgd2lkdGg9IjIwIiBoZWlnaHQ9IjIwIiBmaWxsPSIjRkYwODA5Ii8+CjxyZWN0IHg9IjIwIiB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIGZpbGw9IiMwNDAwRDkiLz4KPC9zdmc+Cg==) no-repeat;
	position: absolute;
	left: 0;
	top: -1px;
	transition: 0.3s cubic-bezier(0, 1.24, 0.94,-0.65);
	background-position: 0 0;
}

[weranda]

Максим Ленский, Не то. Когда наводите на текст, то цвет текста меняется плавно. Надо точнот так, без всяких визуальных смещений изображений, только для фонового SVG.

[Максим]

weranda, я ни весь пример скинул

.title{
	position: relative;
	transition: 0.3s cubic-bezier(0, 1.24, 0.94,-0.65);
	padding-left: 30px;
}

.title:hover{
	color: red;
}

.title:before {
	content: '';
	width: 20px;
	height: 20px;
	display: block;
	background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgMCA0MCAyMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3Qgd2lkdGg9IjIwIiBoZWlnaHQ9IjIwIiBmaWxsPSIjRkYwODA5Ii8+CjxyZWN0IHg9IjIwIiB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIGZpbGw9IiMwNDAwRDkiLz4KPC9zdmc+Cg==) no-repeat;
	position: absolute;
	left: 0;
	top: -1px;
	transition: 0.3s cubic-bezier(0, 1.24, 0.94,-0.65);
	background-position: 0 0;
}

.title:hover:before{
	background-position: -20px 0;
}

[weranda]

Максим Ленский, я говорю не про сам эффект. Должно двигаться не слева направо или с какой либо другой стороны. Красный квадрат должен полностью/целиком замещаться синим, ни двигаться с какой-либо стороны, а замещаться. Вот тут есть пример, но он для двух отдельных изображений.

[Максим]

weranda, ааа...с background не получится это - надо что бы svg было inline вставлено

[weranda]

Максим Ленский, Это прям стопроцентная уверенность?

[Максим]

weranda, да

[weranda]

Максим Ленский, А если сделать :before и :after. При наведении :before будет плавно исчезать, а :after плавно появляться через bg:opacity. Такая штука получится с SVG спрайтом. Как считаете? Я вот сейчас подумал...а не столь и важен этот эффект плавной замены по факту, но как альтернативный вариант...

[weranda]

Максим Ленский, оно так, но не через фоновое изображение, а интересно через фоновое.

[Максим]

weranda, тогда вам надо в два псевдоэлемента расположить один и тот же спрайт и показывать один над другим но при ховер делать прозрачность ненужному - вот и всё

[weranda]

Максим Ленский, спасибо за советы!

[Максим]

weranda, вот так очевидно?