Hallo liebe Forumer,
wie stelle ich es am besten an: Ich habe folgendes Konstrukt:
HTML
<section>
<a class="a-modul" href="arbeit01.html">
<h4 class="header-tabelle">
<span class="table-row">
<span class="table-cell">
Arbeit, 2012
</span>
</span>
</h4>
<figure>
<img src="http://misanthrop.bplaced.net/foo/foo/foo.jpg" alt="Arbeit, 2012">
</figure>
</a>
<p>
Performance
<span>Kunsthalle Münster,</span>
<span>Speicher II, Münster</span>
</p>
</section>
Alles anzeigen
mein CSS
Code
nav a,
nav a:link,
nav a:visited {
background-color: #384d86;
}
nav a:hover,
nav a:focus,
nav a:active {
background-color: whitesmoke;
color: black;
}
nav a,
nav a:link,
nav a:visited,
nav p {
padding: 0.8rem 0;
}
.a-modul {
display: block;
padding: 0.3rem 0;
}
.header-tabelle {
display: table;
width: 100%;
height: 2.7rem;
margin: 0 0 0.8rem 0;
padding: 0 0.3rem 0 0.3rem;
text-align: center;
}
.table-row {
display: table-row;
}
.table-cell {
display: table-cell;
vertical-align: bottom;
line-height: 1.2rem;
}
.arbeiten-galerie div {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}
.arbeiten-galerie>h4 {
display:none;
text-align: center;
margin: 0.3rem 0 0.2rem 0;
}
.arbeiten-galerie div>* {
margin: 0.3rem auto 0.8rem auto;
flex-grow: 0;
flex-shrink: 0;
flex-basis: 400px;
}
.arbeiten-galerie div section img:hover {
opacity: .6;
-webkit-transition: opacity 0.2s ease-in-out;
-moz-transition: opacity 0.2s ease-in-out;
-o-transition: opacity 0.2s ease-in-out;
-ms-transition: opacity 0.2s ease-in-out;
transition: opacity 0.2s ease-in-out;
}
Alles anzeigen
Meine Frage: Wie stelle ich es nun an das alles was vom a:tag umschlossen ist eine opacity: .6; bekommt wenn man .hovert,
der Hintergrund als auch das IMG gleichzeitig -- ABER --
das der Text umschlossen von <span> eine opacity: 1; behält (also KEINE opacity hat!) und halt wie ein Link Unterstrichen ist und die Schriftfarbe schwarz hat.
Wie stelle ich es am besten an, das beides erfüllt wird.
Gruß der misanthrop