Question

我正在设计一个网站，其图片会在淡入淡出时显示文字。

我已经使用下面的线程来做到这一点，但是当我添加的文本进入它所经过的图像的整个宽度和高度时，一切顺利。我试图通过我的CSS为文本添加填充，但它不起作用。

这是我修改过的代码，修改后的

CSS

    p1{font-size:1.3em;text-align:left;color:#ffffff;font-family: 'geosanslightregular';margin:100px 20px 0px 20px;padding:0;}


   div.containerdiv{position:relative}

div.texts{position:absolute; top:0; left:0; width:100%; display:none; z-index:10}

div.texts:hover{display:block}

HTML

    <div class="grid_8">
<a href="cncpt.html">
<div class="containerdiv">
    <img src="images/cncpt.jpg" alt="background">
    <div class="texts">
<p1>LAUNCH OF E-COMMERCE MENSWEAR STORE, STOCKING EVERYONE FROM BALMAIN AND GIVENCHY TO ADIDAS X OPENING CEREMONY, YMC, NIKE AND BEYOND. BREAK HOSTED THE LAUNCH EVENT AND INTRODUCED 200+ KEY MEDIA, BRAND AND INDUSTRY CONTACTS TO THE STORE. WE CONTINUE TO OPERATE THE PRESS OFFICE FOR CNCPT AND HAVE PICKED UP FANS EVERYWHERE FROM GQ DAILY AND METRO, TO KEY ONLINE INFLUENCERS.</p1>
</div>
</div>
</a>
</div>
  <!-- end .grid_8 -->

仍然没有快乐！它显示图像正常，但没有文字显示在页面上或页面上的任何地方！

如何解决这个问题的任何想法都将非常感激。

谢谢，约翰

Answer 1

使用CSS的一个简单答案是在锚标记上使用：hover伪类。

将图像容器设置为CSS中的位置：relative。

创建一个包含文本的div，使用图像容器中的html和CSS格式化。将此绝对定位于CSS中。绝对定位元素相对于相对于父容器定位的元素。如果没有元素设置为相对位置，则它将从body标签中获取其位置。为元素设置宽度也很重要。

HTML

<div class="container">
    <a><img src="img.jpg" alt="background">
       <div class="text">I will show on hover</div>
    </a>
</div>

<强> CSS

div.container{position:relative;}

div.text{ position:absolute; top:0; left:0; width:100%; display:none; z-index:10;}

a:hover div.text{display:block;}

这会将文本放在您设置的容器上，使其位置相对于左上角。 z-index将元素一个堆叠在另一个之上。 z-index越高，元素在堆栈中越高。

w3 schools如果您不熟悉，可以对上述所有代码有一些出色的定义和示例。

您可以使用html和css实现您所效果的效果。我建议你专注于：

在纸上设计您的网站
使用html和CSS布局您的页面
添加翻转效果和jQuery动画

在添加jQuery动画之前

CSS3过渡与所有浏览器都不兼容，虽然经常使用jQuery后备，但CSS中仍有解决方法。

在'悬停'jquery中对齐文本

1 个答案: