opgelost CSS code aanpassen

CSS code aanpassen

23 feb 2016 10:45 - 23 feb 2016 10:47

Hallo,
Ik gebruik custom css om op 3 a 4 pagina's van mijn site de foto's "on mouse over" te doen groeien. Dat lukt wel aardig. Maar... Alle foto's verander on mouse over, inclusief de header foto. Ik wil alleen de foto's in de content gedeelte laten groeien, niet ook bvb de header foto.
Ik krijg de CSS code niet voor elkaar.
Zou iemand kunnen assisteren?
Bedankt alvast,

Hier is de code:

Code:

#container {
    text-align: center;
}
a, figure {
    display: inline-block; 
  	text-align: left;
}
figcaption {
    font-variant-alternates: normal;
    font-variant-caps: small-caps;
    font-variant-east-asian: normal;
    font-variant-ligatures: normal;
    font-variant-numeric: normal;
    font-variant-position: normal;
    font-weight: bold;
    margin-bottom: 10px;
    margin-left: 0;
    margin-right: 0;
    margin-top: 10px;
    text-align: center;
}
figure {
    padding-bottom: 5px;
    padding-left: 5px;
    padding-right: 5px;
    padding-top: 5px; 
}
 img:hover {
    transform: scale(1.1);
}
img {
    transition-delay: 0s;
    transition-duration: 0.2s;
    transition-property: -moz-transform;
    transition-timing-function: ease;
} 
 .row {
  margin: 0 10px;
   display: inline-block;
}

.row:last-child {
  margin-bottom: 0;
}
[class*="col-"] {
  padding-bottom: 5px;
  padding-right: 5px;
 }

Edit Astrid: Ik heb de code tussen codetags geplaatst, volgende keer graag zelf doen.

DarkWhite
Heeft onderwerp gestart
Nieuw op Joomla!NL
Berichten: 10

CSS code aanpassen

23 feb 2016 10:50

Ja, dat is vrij logisch omdat je definitie voor alle afbeeldingen geldt. Dus je zult de afbeeldingen waarbij je de hover wilt, een eigen class mee moeten geven en die ook toevoegen aan je css bestand.

Groetjes, Astrid

Gebruik de zoekfunctie van dit forum voordat je een nieuwe vraag plaatst.
Vragen uitsluitend via dit forum.
yndi.nl - kvk 17157725

Is je vraag beantwoord? Dan kan je het draadje zelf sluiten .
Wil je Joomla!NL steunen? Dat kan met een donatie.

Astrid
Moderator + Technisch team
Berichten: 37556

CSS code aanpassen

23 feb 2016 11:00

Bedankt voor dit zeer snelle antwoord

Sorry voor de codetags, zal vervolgens opletten

Enne.... ik ben niet heel errug thuis in CSS, zou je mij aub een voorbeeld geven?

Thx alweer

DarkWhite
Heeft onderwerp gestart
Nieuw op Joomla!NL
Berichten: 10

CSS code aanpassen

23 feb 2016 12:32

Moet zoiets worden:

Code:

<img src="pad/naarjouwafbeelding/afbeelding.ext" alt="alt tekst" class="groei" />

En dan deze regels verwijderen:

Code:

img:hover {
    transform: scale(1.1);
}
img {
    transition-delay: 0s;
    transition-duration: 0.2s;
    transition-property: -moz-transform;
    transition-timing-function: ease;
}

en deze toevoegen

Code:

.groei:hover {
    transform: scale(1.1);
}
.groei {
    transition-delay: 0s;
    transition-duration: 0.2s;
    transition-property: -moz-transform;
    transition-timing-function: ease;
}

In plaats van groei kan je natuurlijk een andere naam gebruiken.

Groetjes, Astrid

Gebruik de zoekfunctie van dit forum voordat je een nieuwe vraag plaatst.
Vragen uitsluitend via dit forum.
yndi.nl - kvk 17157725

Is je vraag beantwoord? Dan kan je het draadje zelf sluiten .
Wil je Joomla!NL steunen? Dat kan met een donatie.

Astrid
Moderator + Technisch team
Berichten: 37556

CSS code aanpassen

23 feb 2016 15:35

Bedankt Astrid voor dit antwoord. Ik heb het al ingevoerd en die doet et prima.

DarkWhite
Heeft onderwerp gestart
Nieuw op Joomla!NL
Berichten: 10

CSS code aanpassen

23 feb 2016 15:39

Hallo,

Fijn dat het opgelost is.
Dank je wel voor de terugkoppeling.

Je kunt in de toekomst zelf na het terugkoppelen de topic sluiten door op de groene "Dit is de oplossing" knop te klikken.
Kijk ook hier even voor een volgende keer