Ondersteuning » Thema en CSS/opmaak » Hovers maken in headerafbeelding

6 reacties aan het bekijken - 1 tot 6 (van in totaal 6)
  • Je topic staat op resolved, maar zo te zien hovert er nog niks. Wil je dit nog?

    Wil je dat op hover het hele plaatje in 1 keer verandert? of per schilderijtje? Wil je per schilderij dan zit hier nog wel wat werk in.

    Thread starter Hanneke de Graaf

    (@hanneke-de-graaf)

    Beste Arjen,

    Dank je voor je reactie.
    Het is de bedoeling dat het per schilderijtje verandert.
    Ik heb gisteren wat zitten puzzelen met dreamweaver en het is me gelukt om een plaatje met een mouseover te maken.
    Het staat nog niet online omdat het nog niet af is en omdat het niet precies gaat zoals ik het wil.

    Ik heb het achtergrondbeeld gebruikt waar alle schilderijtjes al inzitten en een transparante img op één van de schilderijtjes gelegd. Hiermee heb ik een hover gemaakt met een 2e plaatje. Waarschijnlijk lukt het niet om het zo ook nog schaalbaar te maken. Uiteindelijk moeten alle schilderijtjes een hover krijgen.
    Ik ben heel benieuwd of dat ook de manier is waarop jij het zou aanpakken.

    Maar toen ik het zo zag verspringen vond ik het er toch wel wat knullig en ouderwets uitzien, zodat ik ben gaan zoeken naar wat geavanceerdere manieren. Ik heb wat css code gevonden waarmee je het plaatje in- en uitfade. Daar wil ik vandaag mee gaan experimenteren. Volgens mij werkt dat door de afbeelding er op te leggen en deze dan 0% opacity te geven, en bij mouseover 100% opacity.

    Een hele onderneming. Als jij hier nog iets aan kunt toevoegen of wil opmerken dan hoor ik dat heel graag.

    Voor zover ik weet is het niet mogelijk om de header een hover te geven en dan zodanig dat ze per schilderijtje gaan. Dan zouden ze allemaal tegelijk gaan bij hover.

    Je zou dan alle schildertijtjes allemaal in een aparte div moeten zetten en die per stuk een hover class meegeven.

    Mocht er nog iemand zijn die een andere oplossing heeft dan ben ik ook wel erg benieuwd.

    Je zou met css3 (let op dat niet alle browsers dit ondersteunen) of met jquery een fadeIn of fadeOut kunnen doen en dan hier een snelheid aan geven

    Thread starter Hanneke de Graaf

    (@hanneke-de-graaf)

    Inmiddels is het me gelukt om plaatjes te laten faden, en inderdaad op de manier die jij beschrijft. Met aparte div’s en met css een tijd er aan geven.
    De twee schilderijtjes linksboven heb ik nu zo gemaakt in een testpagina:
    http://praktijkjoss.nl/testpagina/
    Dat het niet in alle browsers werkt is wel jammer. Dat wist ik niet. Ik denk ook niet dat het mogelijk is om het responsive te maken. Weet jij dat?

    Ik moet het anders zeggen, niet alle items van css3 worden ondersteund door alle browsers, al worden het er wel snel meer 😉

    Ik denk niet dat je dit responsive kan maken op deze manier. dan wordt het te klein,
    je zou de schilderen wel kunnen gebruiken, maar de background moet dan weg op mobiel. (voor ipad zou je het eventueel wel kunnen doen)

    Thread starter Hanneke de Graaf

    (@hanneke-de-graaf)

    De hovers zijn extra navigatie, dus als het niet overal werkt dan is dat gelukkig geen ramp.
    Dank voor het meedenken!

6 reacties aan het bekijken - 1 tot 6 (van in totaal 6)
  • Het onderwerp ‘Hovers maken in headerafbeelding’ is gesloten voor nieuwe reacties.