Change first-child css on parent hover
-
26-12-2019 - |
Question
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>
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?
Solution
You can do this :
.big:hover .small{
// do stuff
}
Check this fiddle
Note: I'm using div
instead of img
element here.
OTHER TIPS
.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;
}
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow