CODEWITHSUNDEEP
javascripthtmlcss
serhio
serhio

Reputation: 28586

Change first-child css on parent hover

The fiddle of the sample is here: http://jsfiddle.net/3cYtX/12/

I have an element representing an image (say, video image screen) and a child element representing another image (say 90x60, the "play" icon).

<div class="big">
    <img class="small">
</div>

enter image description here

The small image is centered vertically and horizontally.

I want when I over the big image the small one change its opacity.

The code bellow works only when I hover the small image. 

.small {
    opacity: 0.5;
}
.small:hover {
    opacity: 0.9;
}

Is there a way to fix that (change on hover the big image) only via CSS?

Upvotes: 0

Views: 1061

Answers (2)

Saman Gholami
Saman Gholami

Reputation: 3512

You can do this :

.big:hover .small{

  // do stuff
}

Check this fiddle

Note: I'm using div instead of img element here.

Upvotes: 5

SVS
SVS

Reputation: 4275

.big {
    width:200px;
    height:150px;
    background-color: green;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}
.small {
    opacity: 0.9;
    background: red;
    width:90px;
    height:60px;
}
.big:hover > .small {
    opacity: 0.5;
}

Demo Fiddle

Upvotes: 0

Related Questions