Change parent AND child div on hover with CSS

Question

Some code...

<a href="#">
<div class="col-md-4">
<img src="image.jpg">
<div class="text">TEXT</div>
</div>
</a>

and some css to start...

.col-md-4 {
background color: #000;
}
.text {
color: #fff;
}

I want to change the col-md-4 IMAGE opacity on rollover. At the same time, i also need the TEXT to change color on rollover.

I can get one or the other working - text or div, but not both.

Any idea what I need to do to target both on rollover?

Answer 1

Based on your comments I believe that this is what you are after.

   .col-md-4:hover img {
    opacity:0.6
    }

This will change the opacity of the image only when the div is hovered.

For the text change

   .col-md-4:hover .text {
    color: /* other color */
    }