我想在我的菜单上制作一个动画,而不是你可以在第一个两个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/
提前谢谢。
答案 0 :(得分:1)
我们需要将图片元素放在#wrap
div内并且在#slide
div之前,然后给#wrap
div position:relative
,这是必要的,因为我们需要绝对定位position:absolute
#slider
div并将其定位到top 0
和left:0
,以便它位于图像上方并覆盖它。
与此JS Fiddle一样,将以下代码添加到#wrap
和#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>