Question

我想以响应的方式将屏幕划分为网格，并希望以时尚的方式显示网格项目。

我使用Bootstrap css作为响应式页面并创建了这样的网格：

http://jsfiddle.net/karimkhan/bc954zLq/2/

代码：

<div class="container">
    <div class="row">
        <div class="col-xs-6 col-sm-2 col-md-2 well rowCell">
            <img src="http://lorempixel.com/1500/600/abstract/1"  />

        </div>
        <div class="col-xs-6 col-sm-2 col-md-2 well rowCell">
            <img src="http://lorempixel.com/1500/600/abstract/2" />

        </div>
        <div class="col-xs-6 col-sm-2 col-md-2 well rowCell">
            <img src="http://lorempixel.com/1500/600/abstract/3" />

        </div>
        <div class="col-xs-6 col-sm-2 col-md-2 well rowCell">
            <img src="http://lorempixel.com/1500/600/abstract/4" />

        </div>
        <div class="col-xs-6 col-sm-2 col-md-2 well rowCell">
            <img src="http://lorempixel.com/1500/600/abstract/4" />

        </div>
        <div class="col-xs-6 col-sm-2 col-md-2 well rowCell">
            <img src="http://lorempixel.com/1500/600/abstract/4" />

        </div>

    </div>
</div>

现在问题是如何使网格项交互on hover

是否可以为小提琴中的网格项创建此样式？

http://metcreative.com/demo_viewer/index.php?theme=santone

Answer 1

要创建该效果，您需要转换：

http://jsfiddle.net/bc954zLq/3/

如果添加此项，您将看到类似于您想要的效果。但您还需要在.rowCell中插入一些html，文字显示在下方。

.rowCell {
    background: white;
    padding: 5px;
    transition: -moz-transform 0.4s ease 0s;
}
.rowCell:hover img {
    transform: translateY(-45px);
}
.rowCell img {
    width: 100%;
    display: block;
    position: relative;
    transition: -moz-transform 0.4s ease 0s;
}

Answer 2

this是我到目前为止所做的。我使用了jquery并更改了描述的显示。

$('document').ready(function(){
    $('img').hover(
        function(){
           $(this).siblings('.description').css('display','block');
        },
        function(){
           $(this).siblings('.description').css('display','none');
       }
    );
});

更新：我使用@Claudiu回答来竞争我的。this是一个竞争版本

在悬停时更改网格视图

2 个答案: