Menu
I'm making a gallery where when you hover over the main image, the thumbnails should become transparent. I would like to achieve this with pure CSS, but I'm not sure if that's possible.
CSS:
/* should affect thumbs but not main */
/* obviously this code wouldn't work */
#main:hover, #thumbs {
opacity: .5;
}
HTML:
<div id="main">
Hover over me to change #thumbs
</div>
<div id="thumbs">
I change when you hover over #main
</div>
Is this possible using pure CSS?
517
You can use the CSS position property in combination with the z-index property to overlay an individual div over another div element. The z-index property determines the stacking order for positioned elements (i.e. elements whose position value is one of absolute , fixed , or relative ).
Approach: This task can be accomplished by adding one element inside the other element & accordingly declaring the required CSS properties for the parent-child elements, so that whenever hovering outside the element then automatically the property of the inner element will change.
If an element is transparent and the element with z-index:-1; is 'under' it. This stops the hover effects. Z-index can you see as elevations in a building, and you watching it from birdseye. You can't reach the basement if there is a floor above it, even if its build from glass.
You can attach styles to a div by using the :hover keyword.
Sure, just use the adjacent sibling selector:
#div1:hover + #div2 {
...
}
An example here: http://jsfiddle.net/6BfR6/94/
80
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
