Question

我试图像这样制作照片网格 http://jasonalvis.co.uk/portfolio/savile-row-company/ 下面的网格应该作为相应照片和描述的链接。感谢

Answer 1

嗯，你可以这样做......

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
    $(document).ready(function() {
        // On mouseover, change the height, and margin-left/top
        $('.article').on('mouseenter', this, function() {
            $(this).find('img').stop().animate({
                "height": 400,
                "margin-left": '-50px',
                "margin-top": '-50px'
             }, 500 );
        });

        // On mouseleave, everything goes back to normal :)
        $('.article').on('mouseleave', this, function() {
            $(this).find('img').stop().animate({
                "height": 300,
                "margin-left": 0,
                "margin-top": 0
             }, 500 );
        });
    });
</script>

这个风格

<style>
    .container {width:1280px; margin: 0 auto;}
    .article {width:300px; height: 300px; float:left; position:relative; overflow: hidden; margin: .5em;}
    .article .image img {width:auto; height:300px; display:block;}
    .article .info {position:absolute; left:0; bottom:0; width:100%;}
    .article .info h2, .article .info p {color: #f0f0f0; font-family: Arial, Verdana, serif;}
</style>

您可以使用此HTML结构：

<div class="container">
    <article class="article">
        <a href="#">
            <div class="image"><img src="http://s12.postimg.org/hh8y6d8d9/1280x490_1.jpg" alt="image"></div>
            <div class="info">
                <h2>Title</h2>
                <p>Excerpt</p>
            </div>
        </a>
    </article>
    <!-- Repeat the article -->
</div>

此处的示例：http://jsfiddle.net/2eap6srL/

Answer 2

此处JSFiddle示例。

如果你想在你的页面上使用它，你必须包含Bootstrap，只需将以下代码复制并粘贴到你的head标签：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"/>

请阅读有关Bootstrap here的更多信息。

带链接的响应式照片网格？

2 个答案: