schräge bilder mit css

[thethrowisreal]

Hey, ich hab mir mal ein Layout gemacht, und habe eine Section wie folgt aussehen lassen (in der psd):
Es soll beim hovern ein Effekt entstehen wie bei Bild 1 (es wird dünkler).
Fragt sich wie man das macht?
Ich habe schonmal die Divs hinbekommen:
Wäre das so semantisch korrekt?
Wie bekomme ich nun den gewünschten Hover effekt mit der Schrift?
MFG

[~ JWonderpig ~]

    <div id="firstrow">
        <div class="feature transform" id="eins">
            <div class="inner">
                <h1>Text</h1>
                <p>
                    Text
                </p>
            </div>
        </div>
        <div class="feature transform" id="zwei">
        </div>
        <div class="feature transform" id="drei">
        </div>
    </div>
    <div id="secondrow">
        <div class="feature transform" id="vier">
        </div>
        <div class="feature transform" id="fuenf">
        </div>
        <div class="feature transform" id="sechs">
        </div>
    </div>

.feature { border: 1px solid blue; height: 350px; width: 225px; float: left; padding: 0; margin: 0; }
#firstrow {margin-top: 50px;}
#secondrow { clear: both; margin-top: 0; margin-left: 227px; }
.transform { -moz-transform: skewY(-7.5deg); /* Firefox 3.6 Firefox 4 */ -webkit-transform: skewY(-7.5deg); /* Safari */ -o-transform: skewY(-7.5deg); /* Opera */ -ms-transform: skewY(-7.5deg); /* IE9 */ transform: skewY(-7.5deg); /* W3C */ }
#eins {background: url(img/5.png);}
#eins:hover { background: rgba(0,0,0,0.4) }
#zwei {background: url(img/5.png);}
#drei {background: url(img/5.png);}
#vier {background: url(img/5.png);}
#fuenf {background: url(img/5.png);}
#sechs {background: url(img/5.png);}

.inner {
    opacity: 0;
    transform: skewY(7.5deg);
}

.feature:hover .inner {
    opacity: 1;
}

Musst du dann für dich noch ein wenig anpassen.

[thethrowisreal]

Originally Posted by Caiv

    <div id="firstrow">
        <div class="feature transform" id="eins">
            <div class="inner">
                <h1>Text</h1>
                <p>
                    Text
                </p>
            </div>
        </div>
        <div class="feature transform" id="zwei">
        </div>
        <div class="feature transform" id="drei">
        </div>
    </div>
    <div id="secondrow">
        <div class="feature transform" id="vier">
        </div>
        <div class="feature transform" id="fuenf">
        </div>
        <div class="feature transform" id="sechs">
        </div>
    </div>

.feature { border: 1px solid blue; height: 350px; width: 225px; float: left; padding: 0; margin: 0; }
#firstrow {margin-top: 50px;}
#secondrow { clear: both; margin-top: 0; margin-left: 227px; }
.transform { -moz-transform: skewY(-7.5deg); /* Firefox 3.6 Firefox 4 */ -webkit-transform: skewY(-7.5deg); /* Safari */ -o-transform: skewY(-7.5deg); /* Opera */ -ms-transform: skewY(-7.5deg); /* IE9 */ transform: skewY(-7.5deg); /* W3C */ }
#eins {background: url(img/5.png);}
#eins:hover { background: rgba(0,0,0,0.4) }
#zwei {background: url(img/5.png);}
#drei {background: url(img/5.png);}
#vier {background: url(img/5.png);}
#fuenf {background: url(img/5.png);}
#sechs {background: url(img/5.png);}

.inner {
    opacity: 0;
    transform: skewY(7.5deg);
}

.feature:hover .inner {
    opacity: 1;
}

Musst du dann für dich noch ein wenig anpassen.

Das ist schonmal super, vielen Dank!
#edited: Danke schön, funktioniert alles wunderbar!
MfG