Question

本网站基于wordpress

如果有人帮助我，我怎样才能获得图像效果？在HTML5和CSS3中

我刚刚开始网页设计，我仍在学习复制好的网站，所以我可以使用网页设计，我不会出售它们或任何非法的

Answer 1

使用以下代码完成该效果：

JavaScript的：

jQuery(document).ready(function() {

    function tz_overlay() {

        jQuery('.post-thumb a').hover( function () {

            jQuery(this).find('.overlay').stop().animate({ opacity: 1 }, 200);

        }, function () {

            jQuery(this).find('.overlay').stop().animate({ opacity: 0 }, 200);
        });

    }

    tz_overlay();
});

CSS：

.post-thumb a span.overlay 
{
    background: rgba(0, 0, 0, 0.8);
    position: absolute;
    width: 100%;
    height: 60%;
    display: block;
    line-height: 20px;
    z-index: 5;
    filter: alpha(opacity=0);
    -khtml-opacity: 0;
    -moz-opacity: 0;
    opacity: 0;
    text-align: center;
    padding-top: 40%;
    color: #ada89c;
    font-size: 15px;
    font-weight: bold;
}

HTML：

<div class="post-thumb port-thumb">
    <a href="http://www.gear-rat.com/test/portfolio/steel-riveted-box/">
        <span class="overlay" style="opacity: 0;">Steel Riveted Box</span>
        <img src="http://www.gear-rat.com/test/wp-content/uploads/2013/06/boxthumb1.jpg" alt="Steel Riveted Box" style="opacity: 1;">
    </a>                                
</div>

我是如何找到代码的：

我查看了这些图片并注意到他们都有一个名为overlay的类，所以我在.js文件中查看了overlay的任何提及，并看到它在{{1}中使用功能。所以我将该功能和图像周围的div复制到了我的网站。当我打开一个包含该div的页面时，它就像那个网站一样工作，所以我知道我拥有它。

在试图了解网站上的某些内容时，最好环顾四周寻找具体指标。

Answer 2

你可以用html和css3来解决这个问题，你不需要javascript或javascript库。

<html>
<head>
    <title>hello world</title>
    <style type="text/css">
        div#tmp{
            background-color: #A36333;
            height: 100px;
            width: 100px;
        }
        div#tmp div{            
            background-color: #000000;
            height: 100%;
            width: 100%;
            color: #ffffff;
            line-height: 100px;
            vertical-align: middle;
            text-align: center; 
            opacity: 0.0;
            transition: opacity 0.2s linear 0s;
            -webkit-transition: opacity 0.2s linear 0s;
            -ms-transition: opacity 0.2s linear 0s;
            -moz-transition: opacity 0.2s linear 0s;
        }
        div#tmp div:hover{
            height: 100%;
            width: 100%;
            opacity: 0.6;
        }
    </style>
</head>
<body>
    <div id='tmp'>
        <div>hello world</div>
    </div>
</body>
</html>

transition属性定义了html中元素的变化方式。 http://www.w3schools.com/css/css3_transitions.asp

要通过鼠标改变元素，可以在css中使用css：hover选择器。 http://www.w3schools.com/cssref/sel_hover.asp

Answer 3

看看这个小提琴：
http://jsfiddle.net/5tmt98sk/

Visit the JS Fiddle page

当你在jsfiddle页面上时，将鼠标放在图像上

你看过的网站也做同样的事情，但是那里的图像是相同的图像，但是它们会变得更暗，而且photoshop会对它进行一些文字处理。
同样的概念=）

如何为我的网站获得此图像效果？

3 个答案: