Pretty baby spin-doktorer http://1apotekonline.com/cialis/ sterling sølv pille kasse

Ljus bild vid mouseover

Något som man kan se hos flera bloggar är att deras bilder blir ljusare när man håller muspekaren över. Det kanske ser avancerat ut men det är det inte så jag tänkte här visa er hur man gör för att få denna ‘funktion’ på sin blogg.

Gå in i kodmallen, kopiera koden här nedan och lägg in ovanför </head>

<style type="text/css"><!--
img{opacity: 1;
-webkit-transition: opacity 0.7s linear;
-webkit-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;}

img:hover{opacity: 0.6;
-webkit-transition: opacity 0.7s linear;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;}
--></style>
Spara och sen är det klart!

23 år med en kandidatexamen i företagsekonomi och arbetar som ekonomiansvarig på ett företag. Sedan 2010 är jag även egen företagare inom webbdesign och foto som jag sysslar med på fritiden. För tillfället läser jag en webbdesign kurs på 15 hp för att fördjupa mig ännu mer inom området.

Läs mina andra inlägg

5 comments

  1. SvaraKaka - SIMSING.BLOGG.SE

    Hej! Jag har inte lagt in koden eftersom att det inte riktigt fungerar som det ska när jag förhandsgranskat eller sparat.

    När jag lagt in koden går all text i menyn ut över hela fönstret. Har gjort precis så som du skrivit.

  2. SvaraKaka - SIMSING.BLOGG.SE

    Nevermind, jag löste det! Det var bara fel plats på starttag och sluttag i det du skrivit 😀

  3. SvaraEmma Hå

    Går det att göra så att endast några bilder blir ljusa? Jag vill bara att några specifika bilder i min meny skall bli ljusa. Tänker att man kan använda någon class eller så, men exakt hur skulle det se ut i koden? Har provat lite men det verkar inte funka…

    1. SvaraSanna Preifelt

      Ja det går. Ta koden men ändra ordet img till en class, kanske .light-pictures eller något sådant. sedan lägger du på den klassen på de bilder du vill ha med ljus mouseovereffekt.

      &lt;style type=&quot;text/css&quot;&gt;&lt;!--
      .light-pictures {opacity: 1;
      -webkit-transition: opacity 0.7s linear;
      -webkit-transition: all 0.5s ease-out;
      -moz-transition: all 0.5s ease-out;
      transition: all 0.5s ease-out;}
       
      .light-pictures:hover{opacity: 0.6;
      -webkit-transition: opacity 0.7s linear;
      -webkit-transition: all 0.3s ease-out;
      -moz-transition: all 0.3s ease-out;
      transition: all 0.3s ease-out;}
      --&gt;&lt;/style&gt;

      och för bilderna:

      &lt;img src=&quot;bild&quot; class=&quot;light-pictures&quot;&gt;

Kommentera

E-postadressen publiceras inte. Obligatoriska fält är märkta *