Motyw (hover)

Jeszcze nie osadziłem strony na żadnym serwerze.
Jesli to pomoze:
Html
<div id=”Wrapper”>
<header>
<h4 class=”logo”></h4>

<nav>

• HOME
• ABOUT
• CONTACT

</nav>
</header>

<main>
<h1 class=”whote”><span class=”bez”>Menu</span></h1>
<h2 class=”text2″>Jestesmy najlepsza pizzeria w miescie. W naszym menu, poza bogatym wyborem <span class=”zolty”>pizz</span> znajda państwo <span class=”zolty”>sałatki</span> i <span class=”zolty”>dania główne</span></h2>
</main>

<article class=”obrazekpizz”> <div class=”drugiobrap”> <article class=”pictureta”>

</div>

css
main {
width: 1150px;
height: 161px;
padding-top: 110px;
}

.whote {

text-align: center;
background-image: url(image/divider.png);
background-position: center center;
background-attachment: scroll;
background-repeat: repeat-x

}

.bez {
background-color: white;
padding: 0 10px;
color: rgba(58,58,54,1.00)
}
.text2 {

text-align: center;
color: #888888;
font-family: Open Sans, „Helvetica Neue”, Helvetica, Arial, sans-serif;
font-weight: 100;

}
.zolty {
color: #f1c40f;
font-family: Open Sans, „Helvetica Neue”, Helvetica, Arial, sans-serif;
font-weight: 100;
}

#pudl {

width: 1150px;
height: 380px;
background-color: #F1EEF4;
}

.obrazekpizz{
position: absolute;
transform: translate3d(0px, 0px, 0px);
}

.drugiobrap {
position: absolute;
transform: translate3d(393px, 0px, 0px);
top: 0px;
}

.pictureta {
transform: translate3d(386px, 0px, 0px);
position: absolute;
top: 0px;

}

tak,ale zauważyłem,że jeśli dodam do pierwszego obrazku jasność to wszystkie odziedziczą to,a mają różne klasy to samo dotyczy funkcji hover jeśli najade kursorem na pierwszy obrazek to zmieni np jasność on i wszystkie po kolei.