Click here to see Screenshot.我想创建一个带有 Headers 和叠加悬停效果的自适应图像 .
笔记:
-
在所有设备中,在翻转和转出时, Headers 位置将保持不变 .
-
在翻转时, Headers 背景将覆盖整个图像,不透明度为60% .
-
为了对齐 Headers 和 Headers 背景,每10px-15px我需要编写媒体查询 .
-
请参阅附件截图 .
.container-home{
width: 100%;
background: #e3e3e3;
padding-bottom: 40px;
margin-bottom: -20px;
}
.caption-style-2{
}
.caption-style-2 .img-home{
overflow: hidden;
margin: 2% 0;
}
.caption-style-2 .img-home:hover .caption{
opacity: 1;
transform: translateY(-230px);
-webkit-transform:translateY(-230px);
-moz-transform:translateY(-230px);
-ms-transform:translateY(-230px);
-o-transform:translateY(-230px);
}
.caption-style-2 img{
margin: 0px;
padding: 0px;
float: left;
z-index: 4;
width: 100%;
}
.caption-style-2 .caption{
cursor: pointer;
position: absolute;
opacity: .8;
top:70px;
-webkit-transition:all 0.15s ease-in-out;
-moz-transition:all 0.15s ease-in-out;
-o-transition:all 0.15s ease-in-out;
-ms-transition:all 0.15s ease-in-out;
transition:all 0.15s ease-in-out;
}
.caption-style-2 .blur{
background-color: rgba(0,0,0,0.7);
opacity: 0.7;
height: 400px;
width: 435px;
top: 150px;
z-index: 5;
position: absolute;
}
.caption-style-2 .caption-text h1{
font-size: 18px;
}
.caption-style-2 .caption-text{
z-index: 10;
color: #fff;
position: absolute;
width: 300px;
height: 220px;
left: 15px;
top:128px;
opacity: 1;
}
.caption-style-2{
padding-right: 0;
padding-left: 0;
margin:auto;
}
.caption-style-2 .col-md-4, .caption-style-2 .col-sm-6, .caption-style-2 .col-xs-6{
padding-right: 0;
padding-left: 0;
}
.caption-style-2 .margin-a {
margin-left: 2%;
margin-right: 2%;
}
.caption-style-2 .margin-b {
margin-left: 2%;
margin-right: 2%;
}
.caption-style-2 .col-xs-6 {
width: 48%;
}
.caption-style-2 .sky-blue-bg {
background: #0086b8;
}
<div class="row caption-style-2">
<div class="col-md-4 col-sm-6 col-xs-6 img-home">
<img src="images/image_1.png" alt="">
<div class="caption">
<div class="blur sky-blue-bg"></div>
<div class="caption-text">
<h1>Caption 1</h1>
</div>
</div>
</div>
</div>
1 回答
我很抱歉编码员 . 我真的很无聊,你想要这样的东西吗?