仅在将鼠标悬停在图像上时出现的图像上方文本

Question

我得到了一些简单的代码，可以在我将鼠标悬停在图像上时显示文本，我运行遇到的问题是悬停点击框比图像大。我查看了我的 CSS 并尝试了很多，但找不到我需要更改的正确代码。

CSS:

.container {
position: relative;
width: 50%;
}

.image {
opacity: 1;
display: block;
width: 30%;
height: 183px;
transition: .5s ease;
backface-visibility: hidden;
}

.middle {
transition: .5s ease;
opacity: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
text-align: center;
}

.container:hover .image {
opacity: 0.3;
}

.container:hover .middle {  
opacity: 1;
}

.over_image_text {
background-color: #6552c7;
color: white;
font-size: 16px;
padding: 16px 32px;
}

html:

<div class='container'>
                <img class="projects" src="../../images/spaceinvaders.jpg" alt="spaceinvaders"></a>
                <div class="middle">
                    <div class="over_image_text">Read more about this project</div>
                </div>
                </div>

Answer 1

您正在寻找的代码是 class 在您的 CSS:

.over_image_text {
    background-color: #6552c7;
    color: white;
    font-size: 16px;
    padding: 16px 32px;
}

您感兴趣的部分是最后一行padding: 16px 32px;。尝试将像素值减小到适合您的大小。如果这还不够，那么您还可以在此处减少 font-size。

仅在将鼠标悬停在图像上时出现的图像上方文本

Over image text that only appears when hovering over the image

html

css

text

image

hover