overgange / transitions hjælp til start

Tags:    css3

Hej

jeg har kigge på nemprogrammering css3 overgange / transitions. :) og det er sådan at jeg skal have lavet et billede eller hvad man siger sådan at det er når man holder musen over billedet så skal der komme en farve hen over som kun være grå eller blå :) og så stå der navn på billedet eller ligne i den still når man holder musen hen over.

Jeg har det ind i noget php da den skal finde ud af billedet er godkendt og ligne..

Fold kodeboks ind/udPHP kode 


Håber du kan hjælp mig videre.





7 svar postet i denne tråd vises herunder
2 indlæg har modtaget i alt 2 karma
Sorter efter stemmer Sorter efter dato
Det du gør er at lave en container til dit billede (div).
I denne putter du det der skal dække dit billede (cover-div).
Til sidst putter du dit billede i under cover-div'en.

Ved hover sørger du så for at din cover-div vises med en simpel css selector (.container-div-klasse:hover .cover-div-klasse) som gør at du kan sætte en state for din cover-div når du hover din container-div.

Det vigtige ved transitions er at lave det begge veje.
Ikke kun ved hover, men også på start-state fordi ellers går den direkte til den oprindelige state uden transitions når du ikke peger og hover container-div mere.

Har lavet et lille eksempel her: http://jsfiddle.net/VZbHg/6/

Hvis du gerne vil have fuldt grå overdækket så fjern nederste background-property i ".line-image-cover".



Indlæg senest redigeret d. 19.10.2012 09:10 af Bruger #17215
Lærte du ikke noget af de videoer ?

Demo : http://scootergrisen.dk/htmlgrisen/eksempler/eksempel0026.html

Jeg har en side om CSS transform, transition og animation :
http://scootergrisen.dk/htmlgrisen/css_transition.php



#csharper #scootergrisen

Nej jeg synes ikke rigtigt at jeg fik det ude det som jeg havde forvente og håbe på, men jeg vil prøve se den igen og give den chance igen :)

de 2 ting som i har vise mig. De ting skal bare ligges sammen til en :)Hvis i kan forstår hvad jeg mener ;)

Ja #scootergrisen Det er næsten sådan der :) men jeg mangler bare noget farve som gå ind over eller ligne i den still



Indlæg senest redigeret d. 17.10.2012 23:00 af Bruger #17136
Prøv dig lidt frem også læg det på dit webhotel så vi kan se det eller brug jsfiddle.



Prøv dig lidt frem også læg det på dit webhotel så vi kan se det eller brug jsfiddle.


Jeg vil klart lige prøve af og så lige komme til og hvis det gå helt galt så må jeg lige finde ud af sammen med dig/jer hvad problemet kan være. :) men jeg kigger på sagen :D


EIDT
Det tog ikke så lang tid jeg skulle bare kigge på din kode og hans kode og lege lidt frem og tilbage

http://jsfiddle.net/VZbHg/11/

Men det kan godt være at når jeg laver det over på server/min egen side skal jeg nok forbedre det en del altså med tekst og ligne ting :) hvis i kan følge mig :) men jeg skal nok tag nok væk og ligne :) fordi der er nogle ting jeg skal tilpasse efter min forbruge :) eller hvad man siger..



Indlæg senest redigeret d. 18.10.2012 02:02 af Bruger #17136
@Jesper
Som jeg skrev i mit første indlæg
"Hvis du gerne vil have fuldt grå overdækket så fjern nederste background-property i ".line-image-cover"."

Men lagde mærke til der er ikke meget transition, men bare en hover-effekt der kommer på lige med det samme. Det var vel ikke meningen?



@Jesper
Som jeg skrev i mit første indlæg
"Hvis du gerne vil have fuldt grå overdækket så fjern nederste background-property i ".line-image-cover"."

Men lagde mærke til der er ikke meget transition, men bare en hover-effekt der kommer på lige med det samme. Det var vel ikke meningen?


Nej det var ikke sådan rigtigt meningen men jeg synes det er blevet flot nu og ja det er godt eller hvad man siger :)



t