CODEWITHSUNDEEP
css
peace_love
peace_love

Reputation: 6461

How can I change the opacity of my text on hover?

On hover I would like the opacity of my image and text turn to 0.5. But it is working only with the image, not with the text:

a:hover {
    opacity: 0.5;
    cursor:pointer;
}
<a>
    <img src="http://agriculture.vic.gov.au/__data/assets/image/0005/182390/rabbit_img1.jpg" style="max-height:90px">
    <footer class="logo-footer">Matthew <cite>Rabbit</cite></footer>
</a>

Upvotes: 0

Views: 45

Answers (1)

hdotluna
hdotluna

Reputation: 5732

<a>
    <img src="http://agriculture.vic.gov.au/__data/assets/image/0005/182390/rabbit_img1.jpg" style="max-height:90px">
    <footer class="logo-footer">Matthew <cite>Rabbit</cite></footer>
</a>

body {
  background: red;
}

a:hover {
    opacity: 0.5;
    cursor:pointer;
}

a:hover footer {
  opacity: 0.5;
}

Here's a working fiddle.

https://jsfiddle.net/djL0Lwbp/

Upvotes: 2

Related Questions