Q
图像悬停边框
0
A
回答
1
边框总是在元素外......没有“插入边界“ 选项。
另一种方法是插入框阴影。
div {
display: inline-block;
width: 200px;
height: 200px;
background-image: url(http://lorempixel.com/output/food-q-c-200-200-3.jpg);
border-radius:16px;
box-shadow: inset 0 0 0 15px rgba(255,255,255,0.5);
transition:box-shadow 0.5s ease;
}
div:hover {
box-shadow: inset 0 0 0 15px rgba(0,0,155,1);
}
<div>
</div>
编辑:
内半径选项需要另一个元素。在这个例子中,我使用了一个伪元素。
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
div {
display: inline-block;
width: 200px;
height: 200px;
background-image: url(http://lorempixel.com/output/food-q-c-200-200-3.jpg);
border-radius:16px;
position: relative;
overflow: hidden;
}
div::after {
content: '';
position: absolute;
border-radius:16px;
top:12px;
left: 12px;
height: calc(100% - 25px);
width: calc(100% - 25px);
z-index: 1;
background: transparent;
box-shadow: 0 0 0 32px rgba(255,255,255,0.8);
}
div:hover:after {
box-shadow: 0 0 0 24px rgba(0,0,155,1);
}
<div></div>
0
用默认颜色设置边框。然后IMG:悬停{} ---
<div>
<img src="http://dummy-images.com/abstract/dummy-480x270-Bottles.jpg">
</div>
CSS
img{border:10px solid rgba(0,0,0,0.8);border-radius:8px;}
img:hover{border:10px solid blue;}
检查Demo
相关问题
- 1. Css图像悬停在边框半径
- 2. 将悬停边框应用于图像
- 3. CSS a:悬停图像边框
- 4. 如何将CSS图像边框悬停而不移位图像
- 5. Posterous Theming图像悬停框
- 6. 如何在平移/悬停边框/框中对齐图像?
- 7. 防止悬停边框
- 8. 悬停图像
- 9. 悬停图像
- 10. 如何在悬停的图像上添加边框?
- 11. 带有边框半径和不透明度的悬停图像
- 12. 添加一半的右边框以悬停图像
- 13. 在悬停时制作图像红色的边框
- 14. 鼠标悬停文字上的图像边框
- 15. 在单击或鼠标悬停时向图像添加边框
- 16. 边框悬停和裁剪元素内的图像
- 17. 边框和填充后图像跳转悬停
- 18. 悬停框的动画边框(边框左侧,边框顶部)
- 19. 图像(图像悬停)
- 20. 悬停在图像上显示图像旁边的文本
- 21. 悬停显示图像的文本框
- 22. 图像悬停的内容框?
- 23. 复选框标签图像:悬停?
- 24. 悬停效果当悬停图像
- 25. 悬停图像自动悬停?
- 26. 将鼠标悬停在网页框架上的边框图像预览
- 27. 如何在边界悬停后停止图像移动?
- 28. 图像悬停时,如何在悬停时显示图像?
- 29. 悬停,格边框显示,尽管相同的CSS非悬停
- 30. 悬停的Chrome边框半径错误
看到你的代码可能会有所帮助。 – j08691
可能的重复 - http://stackoverflow.com/questions/8452739/css-inset-borders –