悬停时更改网格视图

Changing the grid view on hover

本文关键字：网格 视图 悬停      更新时间：2023-09-26

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

我使用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

有可能为fiddle中的网格项目创建这种样式吗？

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

这就是我迄今为止所做的。我使用了jquery和change显示的描述。

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

更新：我使用@Claudiu answer来强制我。这是一个强制版本

要创建这种效果，您需要转换：

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;
}
相关文章：