Gå til innhold

CSS hover animation - HJELP!

charrl0tte

Anbefalte innlegg

charrl0tte

charrl0tte

Skrevet
Skrevet

Trenger litt hjelp fort!

Holder på med et prosjekt på skolen der jeg skal lage webdesign til en bedrift, og skal lage en meny øverst på siden. Jeg vil lage noe lignende som denne: http://www.labreabakery.com/index.aspx#/home

 

Jeg fant noen koder på denne siden som ser slik ut:

 

.ex1 img{

border: 5px solid #ccc;

float: left;

margin: 15px;

-webkit-transition: margin 0.5s ease-out;

-moz-transition: margin 0.5s ease-out;

-o-transition: margin 0.5s ease-out;

}

 

.ex1 img:hover {

margin-top: 2px;

}

 

Jeg bruker dreamweaver men klarer ikke å få denne koden til å fungere. Jeg har lastet opp bildet som jeg skal bruke, men vet ikke hvordan jeg skal få til koden. Er det noe jeg skal fylle inn i koden overfor? Trenger jeg noen andre koder for at den skal fungere?

 

Håper på raskt svar :)

Lenke til kommentar

Videoannonse

Videoannonse
Annonse
Audun0505

Audun0505

Skrevet
Skrevet (endret)

Trenger litt hjelp fort!

Holder på med et prosjekt på skolen der jeg skal lage webdesign til en bedrift, og skal lage en meny øverst på siden. Jeg vil lage noe lignende som denne: http://www.labreabakery.com/index.aspx#/home

 

Jeg fant noen koder på denne siden som ser slik ut:

 

.ex1 img{

border: 5px solid #ccc;

float: left;

margin: 15px;

-webkit-transition: margin 0.5s ease-out;

-moz-transition: margin 0.5s ease-out;

-o-transition: margin 0.5s ease-out;

}

 

.ex1 img:hover {

margin-top: 2px;

}

 

Jeg bruker dreamweaver men klarer ikke å få denne koden til å fungere. Jeg har lastet opp bildet som jeg skal bruke, men vet ikke hvordan jeg skal få til koden. Er det noe jeg skal fylle inn i koden overfor? Trenger jeg noen andre koder for at den skal fungere?

 

Håper på raskt svar :)

 

Nå har ikke jeg drevet med css eller html på en stund (går mest i php), men har du definert der effekten skal være som en link?

 

Og tar jeg ikke helt feil er du nødt til å lage noe ala:

 

ex1 img a {

utseende på teksten som link

}

 

ex1 img a:hover {

margin-top: 2px;

}

Endret av Audun0505
Lenke til kommentar
charrl0tte

charrl0tte

Skrevet
  • Forfatter
Skrevet

Takk for svar. Jeg tenkte ikke lage tekst, men bilde. Altså, slik ser kodene mine ut. Vet ikke helt hva eller hvor jeg skal fylle det inn.

 

 

}

#teksthjem {

position:absolute;

left:212px;

top:51px;

width:125px;

height:46px;

z-index:2;

}

 

-->

</style>

<script src="../Scripts/AC_RunActiveContent.js" type="text/javascript"></script>

</head>

 

<body>

<div id="wrapper">

<div id="bottom"></div>

<div id="teksthjem"><img src="file:///C|/Users/chahau13/Pictures/home.png" width="130" height="64" /> </div>

<img src="file:///C|/Users/xxxx/Pictures/header.png" width="1020" height="150" alt="header" /></div>

</body>

</html>

Lenke til kommentar
Audun0505

Audun0505

Skrevet
Skrevet (endret)

Takk for svar. Jeg tenkte ikke lage tekst, men bilde. Altså, slik ser kodene mine ut. Vet ikke helt hva eller hvor jeg skal fylle det inn.

 

 

}

#teksthjem {

position:absolute;

left:212px;

top:51px;

width:125px;

height:46px;

z-index:2;

}

 

-->

</style>

<script src="../Scripts/AC_RunActiveContent.js" type="text/javascript"></script>

</head>

 

<body>

<div id="wrapper">

<div id="bottom"></div>

<div id="teksthjem"><img src="file:///C|/Users/chahau13/Pictures/home.png" width="130" height="64" /> </div>

<img src="file:///C|/Users/xxxx/Pictures/header.png" width="1020" height="150" alt="header" /></div>

</body>

</html>

 

Åja, haha :p

 

Nå er det en stund siden jeg gjorde dette (i cs3 eller noe), men jeg tror jeg gjorde noe som..

 

Insert rollover image, velg to bilder

Klikk på rollover image > Add new behaviors > javascript behaviors

Swap image og velg bilde 1 og bilde 2

 

Hvordan du gjør det i ren kode er jeg ikke sikker på, kanskje du må lage bildene eller teksten (menyen) som en liste og gjøre noe sånt

 

#ex li {

list-style:none;

float:left;

font-family:"Verdana", sans-serif;

font-size:13px;

text-align:center;

}

#ex li a{

margin-right:11px;

text-decoration:none;

color:#000;

text-align:center;

}

#ex li.fargen > a:hover {

color:#906;

}

 

Hvordan dette funker på bilde vet jeg ikke, har bare brukt det på tekst

Endret av Audun0505
Lenke til kommentar
charrl0tte

charrl0tte

Skrevet
  • Forfatter
Skrevet

Ok, kanskje det blir lettere om jeg lager det med tekst isteden for bilde? Er ikke så flink på akuratt dette, kunne du laget koden til meg? eller sendt meg en link til hvor jeg kan finne en? (slik at jeg bare endrer navn og font) ??

 

Eller så kan du se på denne siden HER så ser du på Stack & Grow slik ser koden ut:

 

/*Example 2*/

#container {

width: 300px;

margin: 0 auto;

}

 

#ex2 img{

height: 100px;

width: 300px;

margin: 15px 0;

-webkit-transition: all 1s ease;

-moz-transition: all 1s ease;

-o-transition: all 1s ease;

}

 

#ex2 img:hover {

height: 133px;

width: 400px;

margin-left: -50px;

}

 

 

får ikke helt til denne heller, hva må jeg fylle inn?

Lenke til kommentar
Thomas.

Thomas.

Skrevet
Skrevet

Har fått til koden nå, men får ikke den fade effeten.. noen som vet hva jeg gjør galt?

 

Koden fungerer ikke i IE (internet explorer), prøv en annen nettleser.

 

Du bør heller se litt på hover effekter med jQuery, det vil støtte alle nye nettlesere :)

  • Liker 1
Lenke til kommentar

Opprett en konto eller logg inn for å kommentere

Du må være et medlem for å kunne skrive en kommentar

Opprett konto

Det er enkelt å melde seg inn for å starte en ny konto!

Start en konto

Logg inn

Har du allerede en konto? Logg inn her.

Logg inn nå
Gå til emneliste

  • Hvem er aktive   0 medlemmer

    • Ingen innloggede medlemmer aktive
×
×
  • Opprett ny...