如何在悬停的图像上显示图像
我知道这个问题可能已被回答了几次。但我需要一个适用于任何图像的解决方案。如何在悬停的图像上显示图像
我有一个portoflio其中有4个图像。所以它显示图像,我想在悬停时显示Github徽标的图像。
我已经发现了这一点:
a:hover:before {
content: '';
display: block;
background: rgba(255, 0, 0, .5); /* your background */
width: 500px;
height: 500px;
position: absolute;
top: 0;
right: 0;
}
但它需要的宽度和高度的。我的图片没有相同的高度,所以我需要一个适合图片悬停的css/jQuery/angular代码。
谢谢!
试试这个,它会一直覆盖它的父母。您可以编辑背景位置以适合您的需求。
a:hover:before {
content: '';
display: block;
background: url('img-path.png') no-repeat;
background-position: right bottom;
width: 100%;
height: 100%;
position: absolute;
top: 0;
right: 0;
}
编辑:的盘旋一个标签应使用position: relative;
是的!我忘了它,但肯定我有::'a:{position:relative;}'感谢它的工作,我没有想到100%:) – 2014-11-08 15:08:35
如果它工作认为接受答案! – Ragnar 2014-11-08 15:17:23
我必须等待几分钟才能接受它 – 2014-11-08 15:30:35
尝试:'宽度:100%;身高:100%'。 – dfsq 2014-11-08 15:03:27
将悬停功能附加到父容器,然后交换图像,类似于'.parent:hover .child {display:inline}'等。 – adeneo 2014-11-08 15:03:31
设置高度:自动宽度:xxxpx,等于其他徽标 – 2014-11-08 15:06:54