Can I "transform" a sibling with CSS on hover?

Question

I was wondering if I can tranform an object A when I´m hovering a sibling B (only with CSS if possible). This is my code:

<div id="block-1">
    <a href="whatever.hml">
        <img class="imgZoom" src="image.jpg" height="300">
        <div style="height: 86px;" class="caption"> &nbsp;</div>
        <div class="caption-text">
            <h3>Header</h3>
            <h4>subheader</h4>
        </div>
    </a>
</div>

.imgZoom is just this:

.imgZoom {
     -webkit-transition: all 0.4s ease; /* Safari and Chrome */
     -moz-transition: all 0.4s ease; /* Firefox */
     -ms-transition: all 0.4s ease; /* IE 9 */
     -o-transition: all 0.4s ease; /* Opera */
     transition: all 0.4s ease;
}

I want to hover .caption-text and apply a transform to imgZoom (scale), I guess this is absolutely possible but well, I´m not being able to do it. Can anyone help me or at least tell me if is possible? Thanks.

Answer 1

you can do this as was mentioned in comments .caption-text:hover + .imgZoom {} but you have to move img right ater element you want to hover

<div id="block-1">
    <a href="whatever.hml">
        <div style="height: 86px;" class="caption"> &nbsp;</div>
        <div class="caption-text">
            <h3>Header</h3>
            <h4>subheader</h4>
        </div>
        <img class="imgZoom" src="image.jpg" height="300">
    </a>
</div>

if you need element in order you stated, you need use javascript