Forum gratuit: forum de suport al utilizatorilor
Doriți să reacționați la acest mesaj? Creați un cont în câteva clickuri sau conectați-vă pentru a continua.
Forum gratuit: forum de suport al utilizatorilor

Forum gratuit: ajutor și asistență pentru utilizatorii Forumgratuit. Creează și administrează un forum performant. Descoperă funcţionalităţile, tutorialele și ponturile de pe Forumul de suport!

Efect zoom pe imaginile din subiect

Forum gratuit: forum de suport al utilizatorilor ::  Despre Forumgratuit ::   :: Tutoriale

Vezi subiectul anterior Vezi subiectul urmator In jos

Tutorial Efect zoom pe imaginile din subiect

Mesaj Scris de Teodor Lun Mai 11, 2020 3:20 pm

Efect zoom pe imaginile din subiect


Salutare tuturor  La revedere ,

Cu ajutorul acestui tutorial puteti adauga un efect zoom peste imagini cand sunteti cu mouse-ul deasupra lor.
Pentru asta, trebuie sa adaugam cateva coduri CSS.

Efect zoom pe imaginile din subiect PucePanou de Administrare Efect zoom pe imaginile din subiect Arrow10 Afisare Efect zoom pe imaginile din subiect Arrow10 Imagini si culori Efect zoom pe imaginile din subiect Arrow10 Culori Efect zoom pe imaginile din subiect Arrow10 Foaie de stil CSS

Efect zoom pe imaginile din subiect Php31210PHPBB3

Cod:
    .postbody .content img:hover {
        cursor: url('http://icons.iconarchive.com/icons/gakuseisean/ivista-2/32/Start-Menu-Search-icon.png'), auto;
        max-width: 100%;
        }
        .postbody .content img {
        max-width: 250px;
        transition: all ease-out .2s;
        }

Efect zoom pe imaginile din subiect Php21110 PHPBB2

Cod:
     .postbody img:hover {
        cursor: url('http://icons.iconarchive.com/icons/gakuseisean/ivista-2/32/Start-Menu-Search-icon.png'), auto;
        max-width: 100%;
        }
        .postbody img {
        max-width: 250px;
        transition: all ease-out .2s;
        }

Efect zoom pe imaginile din subiect Pun1210 PUNBB

Cod:
    .entry-content img:hover {
        cursor: url('http://icons.iconarchive.com/icons/gakuseisean/ivista-2/32/Start-Menu-Search-icon.png'), auto;
        max-width: 100%;
        }
        .entry-content img {
        max-width: 250px;
        transition: all ease-out .2s;
        }

Efect zoom pe imaginile din subiect Inv1010 INVISIONS

Cod:
    .post-entry img:hover {
        cursor: url('http://icons.iconarchive.com/icons/gakuseisean/ivista-2/32/Start-Menu-Search-icon.png'), auto;
        max-width: 100%;
        }
        .post-entry img {
        max-width: 250px;
        transition: all ease-out .2s;
        }

Rezultat:
Efect zoom pe imaginile din subiect VLRDsQI


Efect zoom pe imaginile din subiect WarningDaca doriti sa schimbati imaginea lupei, cautati in codul css http://icons.iconarchive.com/icons/gakuseisean/ivista-2/32/Start-Menu-Search-icon.png si inlocuiti cu imaginea dorita.

Succes  Magie .


Tutorial actualizat de catre TEODOR
Echipa Forumgratuit
Teodor

Teodor
Membru onorific
Membru onorific

Mesaje : 371
Varsta : 27
Localizare : Italia
Data înscrierii : 28/03/2016
Mulțumiri : 48
Internet Explorer punBB

http://Lestreghebuone.net
Teodor a fost mulțumit de autorul acestui subiect.

Vezi subiectul anterior Vezi subiectul urmator Sus

Forum gratuit: forum de suport al utilizatorilor ::  Despre Forumgratuit ::   :: Tutoriale

Permisiunile acestui forum:
Nu puteti raspunde la subiectele acestui forum