[英]CSS overlay effect is disturbing CSS text on image
I need to display a text on the image using CSS. 我需要使用CSS在图像上显示文本。 I'm doing that using H2 tag:
我正在使用H2标签:
<h2 class="post-message">Test</h2>
Here is the code for CSS: 这是CSS的代码:
.post-message {
position: absolute;
bottom: 10px;
left: 10px;
background: rgba(0, 0, 0, 0.75);
padding: 4px 8px;
color: white;
margin: 0;
font: 14px Sans-Serif;
}
But the overlay effect is messing things up and here is the code: 但叠加效果搞砸了,这里是代码:
.overlay{
overflow: hidden;
background: #000;
}
.overlay img{
-webkit-transition: -webkit-transform .3s ease-out;
-moz-transition: -moz-transform .3s ease-out;
-o-transition: -o-transform .3s ease-out;
transition: transform .3s ease-out;
}
.overlay:hover img{
-webkit-transform: scale(1.2) rotate(-5deg);
-moz-transform: scale(1.2) rotate(-5deg);
-o-transform: scale(1.2) rotate(-5deg);
-ms-transform: scale(1.2) rotate(-5deg);
transform: scale(1.2) rotate(-5deg);
opacity: 0.7;
}
I don't know how to explain what happens and I uploaded 2 screens: 我不知道如何解释发生了什么,我上传了2个屏幕:
A little red arrow will show you what happens on the second image. 一个小红色箭头将显示第二张图像上发生的情况。 A help would be great!
帮助会很棒! I tried all possible things that I knew, expert opinion always is the best solution.
我尝试了所有可能的事情,专家意见总是最好的解决方案。 Thanks in advance!
提前致谢!
<div class="post-thumbnail overlay">
<a href="http://example.com/comey-wikileaks/">
<img src="http://example.com/wp-content/uploads/2017/04/comey-825x510.jpg" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" width="825" height="510">
</a>
<h2 class="post-message">Test</h2>
</div>
An img
has a "replaced content" layout model and basically treated as an inline element, and that includes space at the bottom by default for the bottom part of characters, so there will be a small space between the bottom of an img
and the bottom of the img
's container. img
有一个“替换内容”布局模型,基本上被视为内联元素,默认情况下底部空间包含空格,因此img
底部和底部之间会有一个小空间img
的容器。 To remove that gap at the bottom, either make the img
display: block
or use vertical-align: top
. 要删除底部的间隙,请使用
img
display: block
或使用vertical-align: top
。
If the image is rotating so far that you see the corner of it in the bottom/right corner, either increase your scale()
or don't rotate as much until you can't see that anymore. 如果图像旋转到目前为止你看到它的角落在底部/右角,要么增加你的
scale()
,要么不要旋转那么多,直到你再也看不到它为止。 I don't see it with the code you provided. 我没有看到你提供的代码。
.post-message { position: absolute; bottom: 10px; left: 10px; background: rgba(0, 0, 0, 0.75); padding: 4px 8px; color: white; margin: 0; font: 14px Sans-Serif; } .overlay { overflow: hidden; background: #000; } .overlay img { -webkit-transition: -webkit-transform .3s ease-out; -moz-transition: -moz-transform .3s ease-out; -o-transition: -o-transform .3s ease-out; transition: transform .3s ease-out; } .overlay:hover img { -webkit-transform: scale(1.2) rotate(-5deg); -moz-transform: scale(1.2) rotate(-5deg); -o-transform: scale(1.2) rotate(-5deg); -ms-transform: scale(1.2) rotate(-5deg); transform: scale(1.2) rotate(-5deg); opacity: 0.7; } img { vertical-align: top; }
<div class="post-thumbnail overlay"> <a href="http://example.com/comey-wikileaks/"> <img src="http://kenwheeler.github.io/slick/img/fonz1.png" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" width="825" height="510"> </a> <h2 class="post-message">Test</h2> </div>
You could actually put your img
together with your <h2>
inside a <div>
and let the whole <div>
rotate.... 你实际上可以把你的
img
和你的<h2>
放在一个<div>
,让整个<div>
旋转....
Here is an example base on what you wrote: 以下是您编写的内容的示例:
(obvously, there's a few things to readjust, but it's more or less what you want, I guess ^^) (显然,有一些事情要重新调整,但它或多或少都是你想要的,我猜^^)
.post-message { position: absolute; bottom: 10px; left: 10px; background: rgba(0, 0, 0, 0.75); padding: 4px 8px; color: white; margin: 0; font: 14px Sans-Serif; } .overlay{ overflow: hidden; background: #000; /*these two lines are new*/ display:inline-block; position:relative; } /*I apply style directly on the "overlay"*/ .overlay /*img*/{ -webkit-transition: -webkit-transform .3s ease-out; -moz-transition: -moz-transform .3s ease-out; -o-transition: -o-transform .3s ease-out; transition: transform .3s ease-out; } .overlay:hover /*img*/{ -webkit-transform: scale(1.2) rotate(-5deg); -moz-transform: scale(1.2) rotate(-5deg); -o-transform: scale(1.2) rotate(-5deg); -ms-transform: scale(1.2) rotate(-5deg); transform: scale(1.2) rotate(-5deg); opacity: 0.7; }
<span class="overlay"> <img src="https://www.codeproject.com/KB/GDI-plus/ImageProcessing2/img.jpg" /> <h2 class="post-message">Test</h2> </span>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.