0

我想在我的菜单上制作一个动画，而不是你可以在第一个两个 div 上看到的淡入淡出动画，我想把一个向下滑动的颜色作为动画。作为窗帘。

将鼠标悬停在图像上时，位于图像上的“彩色面板”会在其上向下滑动。这是我的菜单：

@import url(http://fonts.googleapis.com/css?family=Lato:400,900);  /* <-- Just for the demo, Yes I like pretty fonts... */

.square {
    float:left;
    position: relative;
    width: 30%;
    padding-bottom : 30%; /* = width for a 1:1 aspect ratio */
    margin: 0;//1.66%;
    background-position:center center;
    background-repeat:no-repeat;
    background-size:cover; /* you change this to "contain" if you don't want the images to be cropped */
}

.img_1-1{background-image:url('https://farm4.staticflickr.com/3766/12953056854_b8cdf14f21.jpg');}
.img_1-2{background-image:url('https://farm7.staticflickr.com/6092/6227418584_d5883b0948.jpg');}
.img_1-3{background-image:url('https://farm8.staticflickr.com/7187/6895047173_d4b1a0d798.jpg');}

.img_2-1{background-image:url('https://farm8.staticflickr.com/7163/6822904141_50277565c3.jpg');}
.img_2-2{background-image:url('https://farm7.staticflickr.com/6139/5986939269_10721b8017.jpg');}
.img_2-3{background-image:url('https://farm4.staticflickr.com/3165/5733278274_2626612c70.jpg');}

.img_3-1{background-image:url('https://farm9.staticflickr.com/8429/7862595906_8f953fd25b.jpg');}
.img_3-2{background-image:url('https://farm7.staticflickr.com/6083/6055581292_d94c2d90e3.jpg');}
.img_3-3{background-image:url('https://farm4.staticflickr.com/3771/13199704015_72aa535bd7.jpg');}




/*  following just for the demo */


body {
    font-size:20px;
    font-family: 'Lato',verdana, sans-serif;
    color: #fff;
    text-align:center;
    background:#ECECEC;
}

#bottom {
    clear:both;
    margin:0 0;//1.66%;
    width:89.68%;
    padding: 0;//3.5%;
    background-color:#1E1E1E;
    color: #fff;
}
#bottom p{
    text-align:center;
    line-height:2em;
}
#bottom a{
    color: #000;
    text-decoration:none;
    border:1px solid #000;
    padding:10px 20px 12px;
    line-height:70px;
    background:#ccc;
    
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}



.fade {
   opacity: 1;
   transition: opacity .25s ease-in-out;
   -moz-transition: opacity .25s ease-in-out;
   -webkit-transition: opacity .25s ease-in-out;
   
   }

   .fade:hover {
      opacity: 0.5;
      } */
      
<div  class="square img_1-1 fade">
</div>

<div class="square img_1-2 fade">
</div>
<div class="square img_1-3 ">
</div>


<div class="square img_2-1 ">
</div>
<div class="square img_2-2 ">
</div>
<div class="square img_2-3 ">
</div>


<div class="square img_3-1 ">
</div>
<div class="square img_3-2 ">
</div>
<div class="square img_3-3 ">
</div>

这是动画，但我无法弄清楚如何在图像上执行此操作，只需悬停即可。 http://jsfiddle.net/gregmatys/4x9Tf/light/

先感谢您。

4

1 回答 1

1

我们需要将图像元素放在#wrapdiv 内部和 div 之前#slide，然后给#wrapdiv a position:relative，这是必要的，因为我们需要绝对定位div 并将其定位到position:absoluteand以便它位于图像上方并覆盖它。#slidertop 0left:0

就像在这个JS Fiddle中一样，将以下代码添加到#wrapand #slider：

CSS：

#wrap {
  position: relative;
}
#slider {
  position: absolute;
  top: 0;
  left: 0;
}

并将您的div#wrap结构更改为：

<div id="wrap">
  <img src="//placehold.it/200x200?text=IMG">
  <div id="slider">
    <p>Blah blah blah blah blah....</p>
  </div>
</div>
于 2015-12-23T17:32:09.897 回答