Lisää tässä postauksessa olleen koodin yläpuolelle seuraava koodi:
<div class='someicon'>
ja alapuolelle tämä koodi:
</div>
Jolloin HTML/JavaScript-gadgetin pitäisi näyttää jotakuinkin tältä:
<div class='someicon'>
<a href="TÄHÄN SIVUSTON OSOITE,JOHON IKONIA KLIKKAAMALLA PÄÄSEE"_blank"><img src="TÄHÄN SOME-IKONIN KUVAN OSOITE" border="0" /></a>
</div>
Jos sinulla on useita someikoneja, sisällytä ne kaikki divien sisään eli älä lisää ylimääräisiä uusia divejä. EI SIIS NÄIN:
<div class='someicon'>
<a href="TÄHÄN SIVUSTON OSOITE,JOHON IKONIA KLIKKAAMALLA PÄÄSEE"_blank"><img src="TÄHÄN SOME-IKONIN KUVAN OSOITE" border="0" /></a>
</div>
<div class='someicon'>
<a href="TÄHÄN SIVUSTON OSOITE,JOHON IKONIA KLIKKAAMALLA PÄÄSEE"_blank"><img src="TÄHÄN SOME-IKONIN KUVAN OSOITE" border="0" /></a>
</div>
<div class='someicon'>
<a href="TÄHÄN SIVUSTON OSOITE,JOHON IKONIA KLIKKAAMALLA PÄÄSEE"_blank"><img src="TÄHÄN SOME-IKONIN KUVAN OSOITE" border="0" /></a>
</div>
VAAN NÄIN
<div class='someicon'>
<a href="TÄHÄN SIVUSTON OSOITE,JOHON IKONIA KLIKKAAMALLA PÄÄSEE"_blank"><img src="TÄHÄN SOME-IKONIN KUVAN OSOITE" border="0" /></a>
<a href="TÄHÄN SIVUSTON OSOITE,JOHON IKONIA KLIKKAAMALLA PÄÄSEE"_blank"><img src="TÄHÄN SOME-IKONIN KUVAN OSOITE" border="0" /></a>
<a href="TÄHÄN SIVUSTON OSOITE,JOHON IKONIA KLIKKAAMALLA PÄÄSEE"_blank"><img src="TÄHÄN SOME-IKONIN KUVAN OSOITE" border="0" /></a>
<a href="TÄHÄN SIVUSTON OSOITE,JOHON IKONIA KLIKKAAMALLA PÄÄSEE"_blank"><img src="TÄHÄN SOME-IKONIN KUVAN OSOITE" border="0" /></a>
</div>
Seuraavaksi mene Malli > Mukauta > Lisäasetukset > Lisää CSS:ään jokin alaotsikoiden allaolevista kaksiosaisista koodeista:
HAALENEMINEN
.someicon img:hover{
opacity:0.5;
-webkit-transition: all 1s ease-out;
-moz-transition: all 1s ease-out;
-o-transition: all 1s ease-out;
transition: all 1s ease-out;
}
.someicon img{
opacity:1;
transition: all 1s ease-out;
}
PYÖRÄHDYS
.someicon img{
-moz-transition: all 0.6s ease;
-webkit-transition: all 0.6s ease;
-o-transition: all 0.6s ease;
-ms-transition: all 0.6s ease;
transition: all 0.6s ease;
}
.someicon img:hover {
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
KEIKKUVAT IKONIT
.someicon img {
transition: all 0.5s ease;
}
.someicon img:hover {
transform: rotate(30deg);
}