鼠标移上去以中心为原点慢慢出现

最新推荐文章于 2019-02-23 19:08:14 发布

秋水易色

最新推荐文章于 2019-02-23 19:08:14 发布

阅读量348

点赞数

分类专栏： css3 文章标签：鼠标

本文链接：https://blog.csdn.net/weixin_36004294/article/details/53397264

版权

css3 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">
    <title>Home</title>
	
	<script src="http://og9n58fei.bkt.clouddn.com/jquery-2.2.4.min.js"></script>
</head>
<style>
.gallery1 {
    position: relative;
}
.gallery-grid {
    padding: 0;
}
body a {
    transition: 0.5s all;
    -webkit-transition: 0.5s all;
    -moz-transition: 0.5s all;
    -o-transition: 0.5s all;
    -ms-transition: 0.5s all;
}
.gallery-grid img {
    width: 100%;
}
.gallery1 .textbox {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    -webkit-transform: scale(0);
    transform: scale(0);
    background-color: rgba(31, 45, 113, 0.74);
}
.gallery1:hover .textbox {
    -webkit-transform: scale(1);
    transform: scale(1);
}
.textbox {
    -webkit-transition: all 0.7s ease;
    transition: all 0.7s ease;
    text-align: center;
}
.textbox h4 {
    font-size: 2.5em;
    color: #fff;
    margin-top: 4em;
}
.textbox p {
    font-size: 15px !important;
    color: #fff;
    font-weight: 500 !important;
    margin: 22px 0 0 0!important;
}

</style>

<body>

<div class=" gallery-grid gallery1" style="width:30%;">
					<a href="http://ohcs36xup.bkt.clouddn.com/image_2.jpg" class="swipebox"><img src="http://ohcs36xup.bkt.clouddn.com/image_2.jpg" class="img-responsive" alt="/">
						<div class="textbox">
							<h4>Day Spa</h4>
							<p>Welcome</p>
							
						</div>
				</a>
				</div>
				
</body>
</html>

秋水易色

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
鼠标移上去以中心为原点慢慢出现

Home .gallery1 { position: relative;}.gallery-grid { padding: 0;}body a { transition: 0.5s all; -webkit-transition: 0.5s all; -moz-transition: 0.5s all; -o-transition
复制链接

扫一扫