Alles innerhalb des a-tags bei .hover eine opacity: .6; bekommen ABER...
Hallo liebe Forumer,
wie stelle ich es am besten an: Ich habe folgendes Konstrukt:
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 einen 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, dass beides erfüllt wird.
Gruß der misanthrop
Der hier verwendete Code
<style>
body{
background:grey;
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}
section{
border:1px solid black;
width:70vw;
display: flex;
flex-wrap: wrap;
justify-content: space-around;
max-width:400px;
}
a{
text-decoration:none;
}
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:flex;
flex-direction:column;
padding: 0.3rem 0;
justify-content: space-around;
}
h4{
height: 2.7rem;
padding: 0 0.3rem 0 0.3rem;
margin: 0.3rem 0 0.2rem 0;
order:1;
text-align:center;
}
figure{
order:2;
}
/* dick unterschrichen
falls nicht erwünsch dan löschen*/
figure:hover ~ h4:after{
content:'';
display:flex;
margin:0;
padding:0;
margin-left:25%;
border-bottom:2px solid black;
text-align:center;
height:10px;
width:50%;
}
/* bis hier hin */
figure:hover ~ h4{
color:black;
text-decoration:underline;
}
section:hover > a figure{
opacity: .6;
transition: opacity 0.2s ease-in-out;
}
section:hover >p{
opacity: .6;
transition: opacity 0.2s ease-in-out;
}
section:hover{
background-color: whitesmoke;
}
figure img{
width:100%;
}
</style>
<section>
<a class="a-modul" href="arbeit01.html">
<figure>
<img src="image/2.png" alt="Arbeit, 2012">
</figure>
<h4 class="header-tabelle">
<span class="table-row">
<span class="table-cell">
Arbeit, 2012
</span>
</span>
</h4>
</a>
<p>
Performance
<span>Kunsthalle Münster,</span>
<span>Speicher II, Münster</span>
</p>
</section>