CSS: Hover on 3 stacked images
I'm trying to build a photo gallery with stacked photos for each album. When you hover the album I want 1 image to rotate 2开发者_如何学Go0 left, one to rotate 20 right so I see bits of 3 images at the same time.
I think the problem is that the hover signals are stuck on the topmost image in the stacks. I'll post what I have tried below. Any ideas? Is it possible?
<!DOCTYPE html>
<head>
<title>Just-CSS: Rotate stacked images on hover</title>
<style>
body {
background-color: black;
color: white;
padding: 20px;
}
ul {
margin: 0;
padding: 0;
}
ul li {
list-style: none;
position: absolute;
}
img { -webkit-transition: all 0.2s; }
img:hover.green {-webkit-transform: rotate(-20deg);}
img:hover.blue {-webkit-transform: rotate(20deg);}
img { border: 4px solid white; }
img.red { background-color: red; }
img.green { background-color: green; }
img.blue { background-color: blue; }
</style>
</head>
<body>
<ul class="img-stack">
<li><img class="red" width="100" height="100" src=""></li>
<li><img class="green" width="100" height="100" src=""></li>
<li><img class="blue" width="100" height="100" src=""></li>
</ul>
</body>
</html>
I know you can do it with JavaScript but I'm just playing with CSS so please no JavaScript :)
Just change this:
img:hover.green {-webkit-transform: rotate(-20deg);}
img:hover.blue {-webkit-transform: rotate(20deg);}
to this:
ul:hover img.green {-webkit-transform: rotate(-20deg);}
ul:hover img.blue {-webkit-transform: rotate(20deg);}
Because you can only activate one :hover selector at a time (as far as I'm aware), just capture the hover on the parent element.
I guess you should use your ul.img-stack as a wrapper to do it. Trigger the :hover event on the album itself, and not on each picture.
ul.img-stack:hover .green {-webkit-transform: rotate(-20deg);}
ul.img-stack:hover .blue {-webkit-transform: rotate(20deg);}
img:hover.green {-webkit-transform: rotate(-20deg);}
to
img.green:hover {-webkit-transform: rotate(-20deg);}
加载中,请稍侯......
精彩评论