带有标题和叠加悬停效果的响应式图像

Question

>点击这里查看截图。我想创建一个带有标题和叠加悬停效果的响应式图像。

笔记：

• 在所有设备中，在鼠标悬停和推出时，字幕位置将保持不变。
• 翻转时，字幕背景将以 60% 的不透明度覆盖整个图像。
• 为了对齐字幕和字幕背景，我需要每 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>

Answer 1

我很抱歉编码人员。我真的很无聊，所以你想要这样的东西吗？

body {
  margin: 15px;
}
.img-wrapper {
  position: relative;
  width: 400px;
  max-width: 100%;
  height: auto;
  float: left;
}
.img-wrapper img {
  width: 100%;
  max-width: 100%;
  height: 100%;
}
.img-wrapper .caption {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  bottom: 0;
  padding: 10px;
  box-sizing: border-box;
  color: #FFFFFF;
  background: rgba(239, 169, 103, 0.85);
  opacity: 0;
  transition: opacity .15s ease-in-out;
  -moz-transition: opacity .15s ease-in-out;
  -webkit-transition: opacity .15s ease-in-out;
}
.img-wrapper:hover .caption {
  opacity: 1;
  transition: opacity .25s ease-in-out;
  -moz-transition: opacity .25s ease-in-out;
  -webkit-transition: opacity .25s ease-in-out;
}

<div class="img-wrapper">
     <img src="http://thumb101.shutterstock.com/display_pic_with_logo/1248838/282506297/stock-vector-cartoon-carousel-with-colorful-horses-282506297.jpg" />
     <div class="caption">
       Lorem ipsum dolor
     </div>
</div>