我对过渡做了一点实验,并想在:hover上显示图像的标题。这就是我现在得到的:(
我尝试使用图像的大小来调整图形本身的大小)
//Resize figure to image size
$(document).ready(function() {
$("figure>img").load(function() {
$(this).parent().width($(this).width());
});
});
figure {
display: table;
position: relative;
overflow: hidden;
}
figcaption {
position: absolute;
background: rgba(0, 0, 0, 0.75);
color: white;
padding: 10px 20px;
opacity: 0;
/* unvisible to fade in later */
bottom: 0;
left: 0;
display: none;
/* unvisible to fade in later */
-webkit-transition: all 0.6s ease;
-moz-transition: all 0.6s ease;
-o-transition: all 0.6s ease;
}
figure:hover figcaption {
opacity: 1;
/* visible */
left: 0;
display: inline-block;
/* visible */
}
.img-middle {
height: 60%;
width: 60%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<figure>
<img class="img-middle" src="img/test.png" alt="" width="700" height="500"></img>
<figcaption>This is a cool caption</figcaption>
</figure>
该图从未调整过大小。
现在的问题是,图形以某种方式具有100%的宽度,因此该:hover
效果还触发了图像旁边的某个位置。我不想手动设置图的大小。当我尝试figure>img:hover figcaption { /* do stuff */ }
(仅在图像悬停时触发字幕淡入)时,它以某种方式不再起作用。
因此,因为那对我不起作用,所以我尝试根据父母的孩子的尺寸来调整父母的尺寸...
这是你要去的吗?
figcaption {
position: absolute;
display: block;
background: rgba(0, 0, 0, 0.75);
color: white;
height: 100%;
overflow: hidden;
width: 0;
/* unvisible to fade in later */
top: 0;
left: 0;
/* unvisible to fade in later */
-webkit-transition: all 0.6s ease;
-moz-transition: all 0.6s ease;
-o-transition: all 0.6s ease;
text-overflow: ellipsis;
white-space: nowrap;
}
figure {
display: table;
position: relative;
overflow: hidden;
border: 1px solid;
/**
* only an example
*/
width: 500px;
height: 100px;
}
figure img {
display: block;
width: 100%%;
height: 100%;
}
figure > .image-container {
width: auto;
display: block;
width: 80%;
margin: 0 auto;
}
figure > .image-container:hover {
width: 100%;
}
figure > .image-container:hover figcaption {
padding: 10px 20px;
width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<figure>
<div class="image-container">
<img class="img-middle" src="http://lorempixel.com/400/200/" alt="" width="100%" />
<figcaption>This is a cool caption</figcaption>
</div>
</figure>
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句