模糊图像并在图像上显示文本 (css)
[英]Blur image and show text over image (css)
问题描述
我有 2 张图片，将鼠标悬停在上面时，我想模糊并在顶部显示文字。 但是，目前看起来只有当光标位于边缘时图像才会模糊，而当光标位于中间时图像不会模糊。 我希望图像模糊并显示其文本。 有没有人对我可能出错的地方有什么建议？
此外，关于如何更好地在图像中定位文本的任何建议都会很棒。 我认为我的“位置”或“显示”已关闭。 谢谢！
<!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title></title> </head> <style media="screen"> .study-icons { width: 300px; padding-left: 25px; padding-right: 25px; cursor: pointer; /* border: 2px solid blue; */ } .study-icons:hover { -webkit-filter: blur(10px); filter: blur(10px); } .study-wrapper { display: inline-block; text-align: center; padding-bottom: 0px; } .img__wrap { position: relative; height: 255px; width: 300px; } .img__description_layer { position: absolute; top: 0; bottom: 0; left: 10; right: 0; /* background: rgba(36, 62, 206, 0.6); */ color: black; visibility: hidden; opacity: 0; display: flex; align-items: center; justify-content: center; /* transition effect. not necessary */ transition: opacity .2s, visibility .2s; } .img__wrap:hover .img__description_layer { visibility: visible; opacity: 1; } .img__description { transition: .2s; transform: translateY(1em); } .img__wrap:hover .img__description { transform: translateY(0); } </style> <body> <div class="img__wrap"> <div id="image1"> <img class="img__img study-icons" src="assets/studies/image1.png"> <div class="img__description_layer"> <p class="img__description">Sample text here about image1?</p> </div> </div> </div> <div class="img__wrap"> <div id="image2"> <img class="img__img study-icons" src="assets/studies/image2.png"> <div class="img__description_layer"> <p class="img__description">Sample text here about image2</p> </div> </div> </div> </body> </html>
1 个解决方案
解决方案1
0 已采纳 2020-09-18 22:26:38
要解决此问题，请将悬停分配到img__wrap 上
为了确保您的文本居中，您必须将 .ing__wrap 定位为相对位置，然后将 .img__description_layer 设置为如下所示：
Position:absolute;
Top:50%;
Left:50%;
Transform:translate(-50%,-50%);
CSS在图像上显示按钮
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.