I have the following html :
<a href="link.html" >
<img src="image.png class="bw" ></img>
Some text
</a>
And the css associated :
.bw { /* Effects on images */
-webkit-transition: all 0.3s cubic-bezier(1.000, 0.835, 0.000, 0.945);
-moz-transition: all 0.3s cubic-bezier(1.000, 0.835, 0.000, 0.945);
-o-transition: all 0.3s cubic-bezier(1.000, 0.835, 0.000, 0.945);
-ms-transition: all 0.3s cubic-bezier(1.000, 0.835, 0.000, 0.945);
transition: all 0.3s cubic-bezier(1.000, 0.835, 0.000, 0.945);
}
.bw:hover {
-webkit-filter: grayscale(100%);
border: 5px solid #808080;
border-radius: 50%;
}
So when I put my mouse over my image it becomes gray and this is what is expected. However, my text and my image are parts of the link. When my mouse is over my image the text is underlined, but it's not working in the other way. I would like my image to become gray when my mouse is over the text.
How can I achieve that ? So I would like all the elements contained in the to become hovered if one of them is hovered.
Check this FIDDLE You just had to add this
a:hover {
text-decoration:underline;
}
.bw {
/* Effects on images */
-webkit-transition: all 0.3s cubic-bezier(1.000, 0.835, 0.000, 0.945);
-moz-transition: all 0.3s cubic-bezier(1.000, 0.835, 0.000, 0.945);
-o-transition: all 0.3s cubic-bezier(1.000, 0.835, 0.000, 0.945);
-ms-transition: all 0.3s cubic-bezier(1.000, 0.835, 0.000, 0.945);
transition: all 0.3s cubic-bezier(1.000, 0.835, 0.000, 0.945);
}
a:hover img {
-webkit-filter: grayscale(100%);
border: 5px solid #808080;
border-radius: 50%;
}
a:hover {
text-decoration:underline;
}
a {
text-decoration:none;
}
a{
display:inline-block;
}<a href="link.html">
<img src="http://placekitten.com/300/301" class="bw" ></img>
Some text
</a>Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments