【发布时间】：2015-04-20 07:48:35
【问题描述】：
我为图像创建一个蒙版。当我将鼠标悬停在图像上时，蒙版会显示，但是当鼠标退出时，它会突然消失而不是缓慢消失。我想要类似This 效果的东西。这是我的Jsfiddle
我的代码是...
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="css/bootstrap.css"/>
<style>
.top
{
margin-top: 200px;
}
.top div
{
padding:0px;
margin: 0px;
}
img
{
width: 100%;
height: 400px;
padding: 0px;
margin: 0px;
-webkit-transition: margin 1s ease;
-moz-transition: margin 1s ease;
-o-transition: margin 1s ease;
-ms-transition: margin 1s ease;
transition: margin 1s ease;
}
.blog-post:hover img
{
margin-left: 100px;
}
.blog-post
{
border: 1px solid #c0c0c0;
float: left;
overflow: hidden;
}
.mask
{
top: 0;
left:0;
padding: 0;
position: absolute;
display: inline-block;
overflow: hidden;
visibility: hidden;
width: 250px;
height: 100%;
border: 1px solid #ff1493;
-webkit-transition: all 0.5 ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.5s ease-in-out;
transform-origin: 0 0;
-webkit-transform: rotateY(-90deg);
-moz-transform: rotateY(-90deg);
transform: rotateY(-90deg);
-webkit-transition: -webkit-transform 0.4s, opacity 0.2s 0.4s;
-moz-transition: -moz-transform 0.4s, opacity 0.2s 0.4s;
transition: transform 0.4s, opacity 0.2s 0.4s;
background: #ff1493;
}
.mask h4
{
text-align: center;
}
.blog-post:hover .mask
{
visibility: visible;
-webkit-transform: rotateY(0deg);
-moz-transform: rotateY(0deg);
transform: rotateY(0deg);
-webkit-transition: -webkit-transform 1s, opacity 0.2s;
-moz-transition: -moz-transform 1s, opacity 1.2s;
transition: transform 1s, opacity 0.2s;
}
</style>
</head>
<body>
<div class="container col-md-12 top">
<div class="col-md-4">
<div class="blog-post">
<img src="image/Msz.jpg" alt=""/>
<div class="mask clearfix">
<h4>Post title</h4>
</div>
</div>
</div>
<script src="js/jquery-2.1.1.min.js"></script>
<script src="js/jquery.easing-1.3.pack.js"></script>
<script src="js/bootstrap.js"></script>
<script>
</script>
<script></script>
</body>
</html>
我希望当鼠标离开图像时它会慢慢消失而不是快速消失。
【问题讨论】：
-
我更新我的问题检查它..
标签： css css-transitions css-transforms