Obrazek ma przesuwać się w lewą stronę, a nie w dół

Question

Witam.

Tak wygląda kod:
https://jsfiddle.net/Krzysiek_35/k0e8dyx3/69/

Tak wygląda cały roboczy obrazek:
https://cdn.pixabay.com/photo/2016/02/03/13/33/bernese-mountain-dog-1177072_640.jpg

Gdy najedzie się kursorem na ciemne tło z napisem: Strona internetowa, to obrazek przesuwa się w dół. Zauważcie, że ten obrazek roboczy jest prostokątny. Obrazek jako nieruchomy ma być wyświetlany w połowie (od lewej strony do połowy). Chciałbym, aby cała zawartość obrazka przesuwała się w lewą stronę wyświetlając także jego całą prawą stronę.

Czy wiecie jak to zrobić ?

Czy w ogóle da się tak zrobić ?

Będę bardzo wdzięczny za fachową pomoc.

Answer 1

.text:hover + .logo {
	background-position: -51px 0px;
}

 

Comments

Teraz wygląda to tak:

https://jsfiddle.net/Krzysiek_35/k0e8dyx3/72/

Z jednej strony jest dobrze, bo kierunek przesuwania jest prawidłowy.

Zauważ, że prawą stronę obrazka widać tylko w połowie.

Później pokombinuję jak rozwiązać to...

---

Wystarczyła tylko taka poprawka i teraz działa dobrze:

.text:hover + .logo
{
	background-position: 100% 0px;
}