投稿
  1. 云图网首页
  2. 技术专区
  3. 编程教程

使用CSS制作鼠标移到图片上显示文字的效果

• 编程教程

CSS3 真的很强大。过去，我们需要图像或一堆JavaScript代码行才能产生简单的过渡效果。如今，我们仅使用CSS3就可以做到这一点。

在本教程中，我们将向您展示如何使用CSS3简单地创建具有各种过渡效果的图像标题。

浏览器支持

该字幕将在很大程度上取决于转换和过渡属性，而变换和过渡属性是相对较新的功能，因此，明智地注意顺利运行该字幕所需的浏览器支持。

以下是已经支持转换和过渡的浏览器：

  • Internet Explorer 10+（尚未发布）
  • Firefox 6+
  • 铬13+
  • Safari 3.2+
  • 歌剧11+

现在，让我们开始教程。

HTML结构

我们有6张图片；每个图像都有不同的标题样式。

1个
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18岁
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
<div id="mainwrapper"><!-- This #mainwrapper section contains all of our images to make them center and look proper in the browser ->
  <!-- Image Caption 1 -->
  <div id="box-1" class="box">
    <img id="image-1" src="css3-image-captions/1.jpg"/>
    <span class="caption simple-caption">
    <p>Simple Caption</p>
    </span>
  </div>
    <!-- Image Caption 2 -->
    <div id="box-2" class="box">
        <img id="image-2" src="css3-image-captions/2.jpg"/>
        <span class="caption full-caption">
        <h4>Full Caption</h4>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit,sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
        </span>
    </div>
    <!-- Image Caption 3 -->
    <div id="box-3" class="box">
        <img id="image-3" src="css3-image-captions/3.jpg"/>
        <span class="caption fade-caption">
        <h4>Fade Caption</h4>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit,sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
        </span>
    </div>
    
    <!-- Image Caption 4 -->
    <div id="box-4" class="box">
        <img id="image-4" src="css3-image-captions/4.jpg"/>
        <span class="caption slide-caption">
        <h4>Slide Caption</h4>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit,sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
        </span>
    </div>
    
    <!-- Image Caption 5 -->
    <div id="box-5" class="box">
        <div class="rotate"><!-- Rotating div -->
            <img id="image-5" src="css3-image-captions/5.jpg"/>
            <span class="caption rotate-caption">
            <h4>This is rotate caption</h4>
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
            </span>
        </div>
    </div>
    <!-- Image Caption 6 -->
    <div id="box-6" class="box">
        <img id="image-6" src="css3-image-captions/6.jpg"/>
        <span class="caption scale-caption">
        <h4>Free Style Caption</h4>
        <p>Lorem ipsum dolor sit amet,consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
        </span>
    </div>
</div> <!-- end of #mainwrapper-->

基本CSS

在对任何元素进行样式设置之前，使用此CSS重置重置所有属性并为其提供默认样式值始终是一个好的开始，因此所有浏览器都将呈现相同的结果（可能是IE6）。

样式将在style.css文件中分开，因此我们的HTML文件看起来很整洁。但是，不要忘记在head标签内添加链接样式以在文件中应用样式规则。

<link href="style.css" rel="stylesheet" type="text/css" media="screen" />

好的，让我们开始设计元素的样式，从html标签和主包装ID开始：

1个
2
3
4
5
6
7
8
9
html { background-color: #eaeaea; }
#mainwrapper {
  font: 10pt normal Arial, sans-serif;
  height: auto;
  margin: 80px auto 0 auto;
  text-align: center;
  width: 660px;
}
网站建设

网站建设

图像框样式

我们在包含图像的框中应用一些通用样式。这些框将使用向左浮动并排显示。注意，我们还添加了溢出：隐藏属性；这将使通过div的所有内部对象被隐藏。

我们还将在框内的每个图像上声明transition属性，以防稍后需要图像转换。

1个
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18岁
19
20
21
22
23
#mainwrapper .box {
    border: 5px solid #fff;
    cursor: pointer;
    height: 182px;
    float: left;
    margin: 5px;
    position: relative;
    overflow: hidden;
    width: 200px;
    -webkit-box-shadow: 1px 1px 1px 1px #ccc;
    -moz-box-shadow: 1px 1px 1px 1px #ccc;
    box-shadow: 1px 1px 1px 1px #ccc;
}
#mainwrapper .box img {
    position: absolute;
    left: 0;
    -webkit-transition: all 300ms ease-out;
    -moz-transition: all 300ms ease-out;
    -o-transition: all 300ms ease-out;
    -ms-transition: all 300ms ease-out;
    transition: all 300ms ease-out;
}

使用CSS制作鼠标移到图片上显示文字的效果

字幕共同风格

标题将具有一些常见的样式以及过渡属性。与其使用opacity属性，我们不使用RGBA色彩模式，将alpha通道设置为0.8，以使标题看起来有点透明而不影响其中的文本。

1个
2
3
4
5
6
7
8
9
10
11
12
#mainwrapper .box .caption {
    background-color: rgba(0,0,0,0.8);
    position: absolute;
    color: #fff;
    z-index: 100;
    -webkit-transition: all 300ms ease-out;
    -moz-transition: all 300ms ease-out;
    -o-transition: all 300ms ease-out;
    -ms-transition: all 300ms ease-out;
    transition: all 300ms ease-out;
    left: 0;
}

使用CSS制作鼠标移到图片上显示文字的效果

字幕1

第一个字幕将具有通常用于字幕的简单过渡效果。当我们将鼠标悬停在图像上方时，标题将从底部出现。为了解决这个问题，标题的固定高度为30px，我们将其底部位置设置为-30px，以将其隐藏在图片下方。

1个
2
3
4
5
6
7
8
#mainwrapper .box .simple-caption {
    height: 30px;
    width: 200px;
    display: block;
    bottom: -30px;
    line-height: 25pt;
    text-align: center;
}

字幕2

第二种类型具有图像/框尺寸的完整宽度和高度（200x200px），并且过渡就像滑动门效果一样，只是它会从顶部滑动到底部。

1个
2
3
4
5
6
7
#mainwrapper .box .full-caption {
    width: 170px;
    height: 170px;
    top: -200px;
    text-align: left;
    padding: 15px;
}

字幕3

第三个字幕将具有褪色效果。因此，我们为其初始状态添加了不透明度：0。

1个
2
3
4
5
6
7
#mainwrapper .box .fade-caption, #mainwrapper .box .scale-caption {
    opacity: 0;
    width: 170px;
    height: 170px;
    text-align: left;
    padding: 15px;
}

字幕4

第四个标题将从左向右滑动，因此我们将左侧的200px（左：200px）固定为其初始位置。

1个
2
3
4
5
6
7
8
** Caption 4: Slide **/
#mainwrapper .box .slide-caption {
    width: 170px;
    height: 170px;
    text-align: left;
    padding: 15px;
    left: 200px;
}

标题5

第五字幕将具有旋转效果。旋转的不仅是字幕，还包括图像。它更像是通过旋转来改变位置。

因此，我们添加了-180度旋转的transform属性，除非您更喜欢旋转显示器以阅读标题。

1个
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18岁
19
20
21
#mainwrapper #box-5.box .rotate-caption {
    width: 170px;
    height: 170px;
    text-align: left;
    padding: 15px;
    top: 200px;
    -moz-transform: rotate(-180deg);
    -o-transform: rotate(-180deg);
    -webkit-transform: rotate(-180deg);
    transform: rotate(-180deg);
}
#mainwrapper .box .rotate {
    width: 200px;
    height: 400px;
    -webkit-transition: all 300ms ease-out;
    -moz-transition: all 300ms ease-out;
    -o-transition: all 300ms ease-out;
    -ms-transition: all 300ms ease-out;
    transition: all 300ms ease-out;
}

字幕6

最后的字幕将进行比例转换。但是，在前面的字幕中，其内部的文本实际上将与.caption过渡偏移一起显示。在本节中，我们将使其有所不同。

过渡转换完成后，文本将出现。因此，我们在文本上添加过渡延迟，在本例中为h4和p标签。

1个
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18岁
19
20
21
22
23
24
25
26
#mainwrapper .box .scale-caption h4, #mainwrapper .box .scale-caption p {
    position: relative;
    left: -200px;
    width: 170px;
    -webkit-transition: all 300ms ease-out;
    -moz-transition: all 300ms ease-out;
    -o-transition: all 300ms ease-out;
    -ms-transition: all 300ms ease-out;
    transition: all 300ms ease-out;
}
#mainwrapper .box .scale-caption h4 {
    -webkit-transition-delay: 300ms;
    -moz-transition-delay: 300ms;
    -o-transition-delay: 300ms;
    -ms-transition-delay: 300ms;
    transition-delay: 300ms;
}
#mainwrapper .box .scale-caption p {
    -webkit-transition-delay: 500ms;
    -moz-transition-delay: 500ms;
    -o-transition-delay: 500ms;
    -ms-transition-delay: 500ms;
    transition-delay: 500ms;
}

使用CSS制作鼠标移到图片上显示文字的效果

让他们动起来

在以下部分中，我们将在将鼠标悬停在图像或框上时定义标题的行为。

字幕行为1：显示。

对于第一个标题，当我们将鼠标悬停在框上时，我们希望它从底部显示。为了解决这一问题，我们使用了transform属性，下面的CSS代码告诉标题将其权重的100％移动到顶部。

1个
2
3
4
5
6
#mainwrapper .box:hover .simple-caption {
    -moz-transform: translateY(-100%);
    -o-transform: translateY(-100%);
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%);
}

如果您没有意识到对translateY负值，那么您可能需要先阅读本教程以获得更多见解。

字幕行为2：将其向下移动。

相反，第二个字幕将从顶部向下移动。因此，我们对translateY具有积极价值。

1个
2
3
4
5
6
#mainwrapper .box:hover .full-caption {
    -moz-transform: translateY(100%);
    -o-transform: translateY(100%);
    -webkit-transform: translateY(100%);
    transform: translateY(100%);
}
字幕行为3：淡入。

第三字幕实际上是最简单的字幕。当该框处于悬停状态时，标题的不透明度将变为1，使其可见，并且由于我们在caption类中添加了transition属性，因此过渡应该顺利进行。

1个
2
3
#mainwrapper .box:hover .fade-caption {
    opacity: 1;
}
字幕行为4：将其向左滑动。

正如我们之前提到的，该标题将向左滑动，但是图像也会向右滑动。因此，这里有2个CSS声明。

下面的CSS代码指示，当我们将鼠标悬停在框上时，标题将向左滑动其宽度的100％。注意，我们现在使用translateX，因为我们希望幻灯片从右向左水平移动。

1个
2
3
4
5
6
7
8
#mainwrapper .box:hover .slide-caption {
  background-color: rgba(0,0,0,1) !important;
  -moz-transform: translateX(-100%);
  -o-transform: translateX(-100%);
  -webkit-transform: translateX(-100%);
  opacity: 1;
  transform: translateX(-100%);
}

当我们将鼠标悬停在框上时，图像将向左滑动。

1个
2
3
4
5
6
#mainwrapper .box:hover img#image-4 {
  -moz-transform: translateX(-100%);
  -o-transform: translateX(-100%);
  -webkit-transform: translateX(-100%);
  transform: translateX(-100%);
}
字幕行为5：旋转字幕。

此字幕与其他字幕不同，因为它不会从左右移动，而是会旋转。当此框悬停时，包含图片和标题的div将逆时针旋转-180，以隐藏图片并显示标题。

1个
2
3
4
5
6
7
8
/** Rotate Caption :hover Behaviour **/
    #mainwrapper .box:hover .rotate {
    background-color: rgba(0,0,0,1) !important;
    -moz-transform: rotate(-180deg);
    -o-transform: rotate(-180deg);
    -webkit-transform: rotate(-180deg);
    transform: rotate(-180deg);
}
字幕行为6：按比例放大。

该字幕将结合多种变换效果。当框处于悬停状态时，图像将比其初始尺寸放大140％（1.4）。

1个
2
3
4
5
6
  #mainwrapper .box:hover #image-6 {
    -moz-transform: scale(1.4);
    -o-transform: scale(1.4);
    -webkit-transform: scale(1.4);
    transform: scale(1.4);
}

并且，如果您在标题6标题下看到了上方的CSS ，则我们将文本隐藏了200px。下面的CSS代码告诉文本移至其初始位置。因此，文本将同时从左向右滑动。

1个
2
3
4
5
6
7
#mainwrapper .box:hover .scale-caption h4,
#mainwrapper .box:hover .scale-caption p {
    -moz-transform: translateX(200px);
    -o-transform: translateX(200px);
    -webkit-transform: translateX(200px);
    transform: translateX(200px);
}

摘要

尽管这些CSS功能很酷，但是由于我们前面提到的浏览器支持限制，它还没有广泛应用。但是，请继续尝试这些新功能，因为这是我们将来构建网页的方式。

原创文章，作者：ItWorker，如若转载，请注明出处：https://blog.ytso.com/261735.html

赞 (0)
0 0
上一篇 2022年5月25日
下一篇 2022年5月25日

相关推荐

发表回复

登录后才能评论