带炫酷鼠标滑过效果的多列布局效果

这是一款使用CSS3和少量js代码制作的带炫酷鼠标滑过效果的多列布局效果。该效果中将每篇文章制作为垂直多列布局，鼠标滑过每张缩略图时有炫酷的特效，点击缩略图时可将它全屏展开。

HTML

该多列布局效果的HTML结构如下：

<div class="cont__inner">
    <!-- el start -->
    <div class="el">
      <div class="el__overflow">
        <div class="el__inner">
          <div class="el__bg"></div>
          <div class="el__preview-cont">
            <h2 class="el__heading">Section 1</h2>
          </div>
          <div class="el__content">
            <div class="el__text">Whatever</div>
            <div class="el__close-btn"></div>
          </div>
        </div>
      </div>
      <div class="el__index">
        <div class="el__index-back">1</div>
        <div class="el__index-front">
          <div class="el__index-overlay" data-index="1">1</div>
        </div>
      </div>
    </div>
    <!-- el end -->
    ......
  </div>
</div>
                

下面的该多列布局效果的一些屏幕截图：

开始时的布局效果：

鼠标滑过时的效果：

缩略图点击后全屏展开的效果：