文章/答案/技术大牛

发布

社区首页 >问答首页 >如何使用html/css进行图像翻转？

问如何使用html/css进行图像翻转？
EN

Stack Overflow用户

提问于 2014-03-15 00:37:46

回答 5查看 31.5K关注 0票数 0

我目前正在为我的平面设计工作建立一个网站。在我的主页上，我有一系列展示我作品的图片。我希望能够悬停在图像上，以便他们有一个覆盖显示项目的名称和它属于什么类别。我已经研究过你可以使用html来做这件事，使用下面的代码-

<a href="TARGET URL GOES HERE">
    <img src="URL OF FIRST IMAGE GOES HERE"
       onmouseover="this.src='URL OF SECOND IMAGE GOES HERE';"
       onmouseout="this.src='URL OF FIRST IMAGE GOES HERE';">
    </img>
</a>

然而，当我尝试这种方法时，它在预览中不起作用，我已经听说这种方法可能会产生问题，而且是相当过时的。

我还读到过，你可以使用CSS方法，通过创建一个图像，让你想要滚动的两个图像彼此相邻。

然而，如果我这样做，它将很容易将文本放在滚动上，以及链接。例如，在滚动图像上，我将使用HTML和链接来制作文本，但是使用CSS方法容易吗？

这是一个使用这种方法的网站-

http://www.equisgarcia.com

css

image

text

rollover

html

回答 5

Stack Overflow用户

发布于 2014-03-15 01:01:38

有多种方法可以解决这个问题，这始终取决于您的需求。

我只使用CSS和其中的一种方法进行了调整。

你所需要的就是：

1)定义一个包含图片和文本的父元素"parentExample“，并设置大小。2)定义图片imageExample和文字textExample，覆盖所有父尺寸，并设置文字默认隐藏。3)定义一个隐藏图片、显示文字的hover "parentExample:hover“。

.parentExample {
    height: 400px;
    width: 400px;
}
.imageExample {
    height: 100%;
    width: 100%;
}
.textExample {
    height: 100%;
    width: 100%;
    display: none;
}

.parentExample:hover .imageExample {
    display: hidden;
}
.parentExample:hover .textExample {
    display: block;
}

票数 1

Stack Overflow用户

发布于 2014-03-15 15:16:54

一张图片

div { background:url('http://www.placehold.it/200x200/f2f2f2') no-repeat; }

悬停时显示不同的图像

div:hover { background:url('http://www.placehold.it/200x200/666666') no-repeat; }

如果元素是一个锚点或定义了某个onclick函数..使用新类在select上显示不同的图像

div.selected { background:url('http://www.placehold.it/200x200/000000') no-repeat; }

票数 1

Stack Overflow用户

发布于 2014-03-15 00:47:46

这是网站上的第一张图片是如何用HTML制作的：

<html>
<head>
<title></title>
</head>

<body>
    <div id="pr_contain_item_7129129">
        <a class="nohover" href="/New-Year-s-Card" id="p7129129" name=
        "equisgarcia" onfocus="this.blur()" onmouseout=
        "this.className='nohover';" onmouseover="this.className='hover';" rel=
        "history"></a>

        <div class="loader_holder" id="load_7129129"><img src=
        "/_gfx/loadingAnim.gif"></div>

        <div class="cardimgcrop" id="cardthumb_7129129"><img border="0"
        data-hi-res=
        "http://payload241.cargocollective.com/1/8/281332/7129129/prt_300x169_1390152506_2x.jpg"
        height="169" src=
        "http://payload241.cargocollective.com/1/8/281332/7129129/prt_300x169_1390152506.jpg"
        width="300"></div>

        <div class="thumb_title">
            <span class="text">New Year's Card</span>&nbsp;
        </div>

        <div class="excerpt">
            Fig.ω
        </div>

        <div class="thumb_tag">
            <span class="text"><a href=
            "http://www.equisgarcia.com/filter/Lettering">Lettering</a>,
            <a href=
            "http://www.equisgarcia.com/filter/Print">Print</a>&nbsp;</span>
        </div>
    </div>
</body>
</html>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/22410876

复制

相似问题

问如何使用html/css进行图像翻转？
EN

回答 5

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使用html/css进行图像翻转？EN

回答 5

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使用html/css进行图像翻转？
EN