如何使图库图像在悬停时淡出以显示标题、放大、访问站点等详细信息?
我最近看到很多使用了很好的图像库悬停效果,我只是想知道是否有人知道重新创建这种效果的好方法。效果是当您将鼠标悬停在图像上时,图像会淡出或 div 淡出以在图像上显示链接等。
它与此处找到的类似:http://cssnack.com/ 和此处:http://designsnack.com/
我过去创建过类似的东西,但请记住 IE 中的不透明度淡入问题。任何提示都很棒,甚至是获得类似效果的良好教程的指导。
预先感谢您的任何帮助。
I've seen a nice image gallery hover effect used quite a lot lately and I'm just wondering whether anybody knows of a good way to recreate such an effect. The effect is when you hover over an image, the image fades out or a div fades in showing links etc over the image.
It's similar to the one found here: http://cssnack.com/ and here: http://designsnack.com/
I've created something similar in the past, but remember having trouble with the opacity fades in IE. Any tips would be great or even directions to a good tutorial for a similar effect.
Thanks in advance for any help.
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(2)
给你:http://jsfiddle.net/balupton/FZG3v/
Here you go: http://jsfiddle.net/balupton/FZG3v/
您可以使用 JavaScript 并将其放入具有时间滞后的循环中,并将 MyVariable 的值从透明滑动到不透明。
document.getElementById("MyImage").style.MozOpacity=MyVariable
You could use JavaScript and put this in a loop with a time lag and slide the value of MyVariable from Transparent to Opaque.
document.getElementById("MyImage").style.MozOpacity=MyVariable