带有标题和覆盖悬停效果的响应图像[关闭]答案

【问题标题】：Responsive image with caption and overlay hover effect [closed]带有标题和覆盖悬停效果的响应图像[关闭]
【发布时间】：2016-09-21 20:21:53
【问题描述】：

Click here to see Screenshot. 我想创建一个带有标题和覆盖悬停效果的响应式图像。

注意事项：

在所有设备中，翻转和推出时，字幕位置将保持不变。
鼠标悬停时，字幕背景将以 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>

【问题讨论】：

Stackoverflow 不是代码编写服务。您至少必须尝试自己编写代码。如果您有任何特殊问题，那么您可以返回您的代码，然后提出更具体的问题。
另外，没有附加截图..
添加截图、HTML 和 CSS

标签： html css twitter-bootstrap-3 responsive-design responsive

【解决方案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>

【讨论】：