Czy da się w CSS zrobić taki efekt lub podobny (chodzi mi o efekt dynamiczny), że po najechaniu kursorem na fragment zdjęcia, fragment wokół kursora się powięszka i zmienia wraz z przemieszczaniem się kursora po zdjęciu??
W CSS się nie da (no dobra, da, ale to byłby po prostu koszmar, a programista dostałby zawału, gdyby to zobaczył). Jak widzisz, na stronie, do której link podałeś, jest napisane, że efekt jest dzięki JQuery. Dobrym rozwiązaniem jest właśnie zrobienie tego za pomocą JQuery.
Dzięki Panowie za wypowiedzi. Jeżeli nie ma takiej możliwości, to odpuszczę ten temat i zostanę przy nieco prymitywnym sposobie z CSS i użycia transform-scale. Kompletnie nie znam JS, a tym bardziej jQuery. Strona którą tworzę jest typowo informacyjna i HTML+CSS spokojnie wystarczy.
Nie ma czegoś takiego jak hover dla piksela. Hover możesz użyć dla elementu dom.
Możesz użyć nawet pseudoklasy hover i wyświetlić obrazek obok w pełnych wymiarach lub większych niż miniaturka, podobnie jak w przykładzie który dałeś, ale nie uzyskasz efektu przesuwania kursorem myszki i powiększania wybranego fragmentu zdjęcia. Możesz obok miniaturki wyświetlić ten sam obrazek w większych rozmiarach, musisz jedynie odpowiednio napisać kod html i umieścić 2 razy ten sam obrazek ale z różnym ostylowaniem gdzie ustalisz pozycję zdjęcia w dużych wymiarach względem tego w małych no i odpowiedni ich rozmiar. Ogólnie trudniej to zrobić w css+html niż przy użyciu JS, bo trzeba naprawdę dobrze przemyśleć strukturę dokumentu by to zadziałało.
Bez sensu, dla miniaturki o wymiarach 350x600px uzyskujesz 210 000 pikseli nawet gdybyśmy to zwiększyli do kwadratów o bokach 10x10px jak proponuje @drobok to masz 21 000 elementów a każdy z nich to osobny tag img czyli masz przynajmniej 21 000 linijek kodu który odpowiada za miniaturkę. Strata transferu, masa pracy dla przeglądarki aby to zinterpretować, jedyny plus że masz jeden obrazek a nie 21k, taniej, szybciej i przede wszystkim czytelniej byłoby zrobić to z js.
Najlepiej do tego użyć canvas. Ma lepsze wsparcie na urządzeniach mobilnych, a dodatkowo nie trzeba do tego zaprzęgać dodatkowych bibliotek. Przykład tutaj: http://jsfiddle.net/powerc9000/G39W9/
Użyłeś JS, a co za tym idzie czy zrobisz to za pomocą diva i przesunięcia bg czy za pomocą img w div i marginesów ujemnych i dodatnich, a może za pomocą canvas nie ma znaczenia. Fakt faktem efekt ten średnio będzie dostępny na urządzeniach mobilnych bo ciężko obsłużyć tam evekt mousemove. Zauważyłem też że podany przez Ciebie przykład nie działa na firefoxie, więc to też może być argument przeciw jeśli zależy nam na dostępności rozwiązania.