I am facing a challenge with my stylesheet and I believe some JavaScript might be needed.
In one of my divs, there is an image and a text link that both direct to another page.
Currently, when hovering over the image, its opacity changes along with the text color, which is working perfectly.
However, when hovering over the text, only the text color changes but I would like the opacity of the image to change as well.
I have checked my CSS and HTML thoroughly but cannot seem to find the issue...
Below is my CSS code:
.artists_menu{
width: 100%;
margin-top: -120px;
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: grayscale(100%);
filter: url(grayscale.svg); /* Firefox 4+ */
filter: gray; /* IE 6-9 */
}
.bandeau{
height:7px;
background-color: #eeeeee
}
.cartouche_crop{
height: 240px;
overflow: hidden;
opacity:1;
webkit-transition: opacity 0.3s ease-in-out;
-moz-transition: opacity 0.3s ease-in-out;
-ms-transition: opacity 0.3s ease-in-out;
-o-transition: opacity 0.3s ease-in-out;
transition: opacity 0.3s ease-in-out;
}
.cartouche_crop:hover{
opacity:0.7;
ilter: alpha(opacity=70);
}
h1{
font-size: 36px;
text-transform: uppercase;
font-weight: normal;
background-color: lightgrey;
}
h1 a:hover{
color: magenta!important
}
a, a:active, a:visited {
color: black;
text-decoration: none;
transition: 0.2s ease;
-webkit-transition: color 0.2s ease-in;
-moz-transition: color 0.2s ease-in;
-o-transition: color 0.2s ease-in;
transition: color 0.2s ease-in;
}
a:hover {
color: magenta
}
And here is the corresponding HTML:
<a href="http://www.amsbooking.fr/mattieumoreau/artists/amine_edge_and_dance/" title="amine edge & dance">
<div class="bandeau"></div>
<div id="parent-57" class="parent-page">
<div class="cartouche_crop">
<img src="http://www.amsbooking.fr/mattieumoreau/wp-content/uploads/amine_11.jpg" class="artists_menu">
</div>
<div class="bandeau"></div>
<h1>amine edge & dance</h1>
<div class="bandeau"></div>
</div>
</a>
For a live demonstration, you can visit this jsFiddle link: http://jsfiddle.net/FkWxb/1/
If anyone has any suggestions or guidance on how to resolve this, I would greatly appreciate it.