鼠标移动上去 展示文字
代码结构：
css:
.tags_list_designer {
position: relative;
width: 100%;
height: 141px;
background-color: #f8f8f8;
}
.auto {
width: 1200px;
margin: 0 auto;
}
.tags_list_designer .tags_list {
position: absolute;
display: -webkit-box;
display: -ms-flexbox;
display: -moz-flexbox;
display: flex;
bottom: 24px;
left: 50%;
margin-left: -600px;
z-index: 29;
}
.tags_list_designer .tags_list .item {
position: absolute;
bottom: 0;
width: 224px;
max-height: 92px;
background-color: #fff;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
overflow: hidden;
cursor: pointer;
-webkit-transition: all 0.5s;
transition: all 0.5s;
}
.tags_list_designer .tags_list .item:hover {
max-height: 240px;
}
鼠标移动上 内容向内收缩：
html结构：
css:
.index_sjs_box .index_sjs_info_con {
width: 472px;
height: 515px;
margin: 90px auto 0;
border: 1px solid #fff;
}
_index.less:
.index_sjs_box .pr {
position: relative;
}
.index_sjs_box .index_sjs_info_con .index_sjs_info_con_img {
width: 356px;
height: 449px;
left: -56px;
top: -61px;
overflow: hidden;
}
.index_sjs_box .index_sjs_info_con .index_sjs_info_con_img a {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, .4);
opacity: 0;
overflow: hidden;
-webkit-transition: all 0.5s;
transition: all 0.5s;
}
.index_sjs_box .index_sjs_info_con:hover a {
opacity: 1;
z-index: 9;
}
.index_sjs_box .index_sjs_info_con .index_sjs_info_con_img a .overlay-label {
margin: 207px auto 0;
width: 106px;
height: 51px;
line-height: 51px;
color: #fff;
font-size: 20px;
font-weight: 400;
text-align: center;
position: relative;
overflow: hidden;
opacity: 0;
}
.index_sjs_box .index_sjs_info_con:hover a .overlay-label .line-up-box1, .index_sjs_box .index_sjs_info_con:hover a .overlay-label .line-bot-box1 {
left: 36px;
width: 25%;
}
.index_sjs_box .index_sjs_info_con .index_sjs_info_con_img a .overlay-label .line-up-box1 {
overflow: hidden;
width: 51%;
position: absolute;
top: 0;
left: 0;
-webkit-transition: all 0.5s;
transition: all 0.5s;
}
.index_sjs_box .index_sjs_info_con .index_sjs_info_con_img a .overlay-label .line-up-box2 {
overflow: hidden;
width: 50%;
position: absolute;
top: 0;
right: 0;
-webkit-transition: all 0.5s;
transition: all 0.5s;
}
.index_sjs_box .index_sjs_info_con .index_sjs_info_con_img a .overlay-label .line-bot-box1 {
overflow: hidden;
width: 51%;
position: absolute;
bottom: 0;
left: 0;
-webkit-transition: all 0.5s;
transition: all 0.5s;
}
.index_sjs_box .index_sjs_info_con .index_sjs_info_con_img a .overlay-label .line-bot-box2 {
overflow: hidden;
width: 50%;
position: absolute;
bottom: 0;
right: 0;
-webkit-transition: all 0.5s;
transition: all 0.5s;
}
.index_sjs_box .index_sjs_info_con:hover a .overlay-label .line-up-box2, .index_sjs_box .index_sjs_info_con:hover a .overlay-label .line-bot-box2 {
right: 36px;
width: 25%;
}
.index_sjs_box .index_sjs_info_con:hover a .overlay-label .line-up-box2, .index_sjs_box .index_sjs_info_con:hover a .overlay-label .line-bot-box2 {
right: 36px;
width: 25%;
}
鼠标移动上去，图片放大：
.mall_box .center_right .center .hd .left_box img {
-webkit-transform: scale(1);
transform: scale(1);
-webkit-transition: all 0.5s;
transition: all 0.5s;
}
.mall_box .center_right .center .hd .left_box .l_img:hover img {
-webkit-transform: scale(1.1);
transform: scale(1.1);
-webkit-transition: all 0.5s;
transition: all 0.5s;
}
网友评论