Question

我在我的网站上创建了一个网格组合页面，我希望在缩略图中添加一个功能。我希望每当有人在鼠标悬停在缩略图上时，它会显示帖子标题，发布日期和摘录。

我一直试图找到一个我的意思的例子，这非常相似;

http://lucybenson.net/redesign2011/

到目前为止，我在Wordpress上的循环看起来像这样

http://pastie.org/2135220

是否有插件可以执行此操作？如果没有，是否有人能告诉我如何实现这一目标？

提前致谢。

Answer 1

这种事情有plugins，但你自己很容易做到。

这未经过测试，但它应该让你朝着正确的方向前进：

<style type="text/css" media="screen">

    .image-list {
        list-style-type: none;
        margin: 0;
        padding: 0;
    }

    .image-list li {
        margin: 0 10px 0 0;
        padding: 0;
        float: left;
    }

        .image-list li a {
            display: block;
            position: relative;
            height: 50px;
            width: 50px;
        }

            .image-list li a span {
                display: block;
                height: 100%;
                width: 100%;
                position: absolute;
                top: 0;
                left: 0;
                background-color: rgba(0,0,0,0.4);
                color: #fff;
            }

</style>

<ul class="image-list">
    <li>
        <a href="#">
            <img src="myimage.jpg" alt="My Image">
            <span>
                This is my overlay content
            </span>
        </a>
    </li>
</ul>

<script type="text/javascript">

$(function() {

    $(".image-list li a").hover(

        // Mouse Over
        function() {

            $(this).find("span").fadeIn();

        }, 

        // Mouse Out
        function() {

            $(this).find("span").fadeOut();

        }
    );

});

</script>

Answer 2

如果你正在寻找一个独立于javascript的解决方案 - 我知道，听起来真的很傻但是值得一试 - 你可以通过CSS纯粹来做。这不是太难 - http://jsfiddle.net/teddyrised/TWBhU/

我所做的是使用-webkit-transition / transition property。当然，我的解决方案并不像Jesse发布的那样优雅，但很高兴知道CSS也可以起到一定的作用。

Answer 3

你需要在这里排序一些东西 - 首先你需要让你的头脑能够让一件事情在另一件事之上 - 所以这就是你在完成之后的效果，只是在css中使用：hover类。关键是在绝对定位的包装中使用绝对位置来获取图像顶部的文本

http://jsfiddle.net/aDwe4/

接下来你想要淡化项目 - 有些人可能不喜欢它 - 但jquery让这非常容易 - 删除悬停类并将animate函数放在你的页脚中的一些脚本标签

http://jsfiddle.net/aDwe4/1/

最后你现在需要把它翻译成你的wordpress tempalte - 我不确定你的模板发生了什么 - 所以我只想写一个例子。我会安装get_the_image plugin然后在你的循环中放置这样的东西

<div class="imagewrap">
<div class="image">
<?php if ( function_exists( 'get_the_image' ) ) get_the_image(); ?>
</div>
<div class="copy">
<h3><a href="<?php the_permalink(); ?>" rel="bookmark"><?php the_title(); ?></a></h3>
<?php the_excerpt(); ?>
</div>
</div>

你显然需要查看get_the_image是如何工作的，但我认为你应该大笑！

将鼠标悬停在缩略图上时显示信息

3 个答案: