2

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.

Shanaka
  • 953
  • 2
  • 9
  • 25
Pizzaboy
  • 331
  • 2
  • 14
  • 1
    its something like `.caption-text:hover + .imgZoom {}` – mador Jun 18 '15 at 07:38
  • 1
    CSS selectors cannot traverse the DOM upwards. So if your `img` is below `.caption-text` then there is a chance. – Harry Jun 18 '15 at 07:38
  • @mador: No, `+` selects only when the element is the next adjacent sibling. – Harry Jun 18 '15 at 07:39
  • @Harry, its not upwards (if i see correctly).. .caption-text and .zoomImg are on the same level. – mador Jun 18 '15 at 07:40
  • 1
    @mador: But the `img` is the previous sibling in the DOM (upwards as in, present prior to this element in the DOM) and `+` selects only the next adjacent sibling. – Harry Jun 18 '15 at 07:41
  • basically it's not possible with CSS or CSS3. please refer to this thread -> http://stackoverflow.com/questions/12574668/change-color-of-sibling-elements-on-hover-using-css – balfonso Jun 18 '15 at 07:42
  • possible duplicate of [Is there a previous sibling selector?](http://stackoverflow.com/questions/1817792/is-there-a-previous-sibling-selector) –  Jun 18 '15 at 07:47

1 Answers1

4

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

Pepo_rasta
  • 2,842
  • 12
  • 20
  • I need them in that order, the caption is over the img... so ok, no CSS then. Thanks for your answer. – Pizzaboy Jun 18 '15 at 07:50
  • 2
    @torpedete: You could still try using absolute positioning or negative margins etc :) – Harry Jun 18 '15 at 07:51
  • I don't really understand the down-vote on the answer to be honest. It is explicitly mentioned by the author that a markup change is required and there is no other pure CSS way that I could think of. – Harry Jun 18 '15 at 07:57
  • No way, I´m finishing this big project and I´m not gonna change the layout now, javascript and no worries :) Thanks mate. – Pizzaboy Jun 18 '15 at 08:01
  • @torpedete: That's ok mate. Final decision on whether to use or not is always yours :) – Harry Jun 18 '15 at 08:02