仅在图像上进行叠加

Question

我试图让我的黑色叠加文字只能覆盖我的图像本身（而不是结束，好吧，其他一切也像现在一样）。我的目标是可能的吗？当黑色叠加显示它也覆盖了我的产品标题，这是错误的。

.image-video-linkmas img {    
	max-width: 100%;
	max-height: 236px;
	margin: 0;
	position:relative;
	display: inline-block;
	padding: 0px;
}

.product-details:hover .overlay {
    opacity: 1;
}

.product-details .overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    border-radius: 0;
    background: #000;
    color: #fff;
    /*vertical-align: middle;*/
    -webkit-transition: opacity 500ms;
    -moz-transition: opacity 500ms;
    -o-transition: opacity 500ms;
    transition: opacity 500ms;
    /*padding: 25px;
    text-align: center;*/
}

<div class="well sb">
        <div>
            <div class="product-details">
                <div class="image-video-linkmas">
                    <a href="#" target="_blank"><img alt="#" src=
                    "http://lorempixel.com/300/300"></a>
                </div>
                <div class="overlay">
                <div class="intro-descriptioncar">
                    intro-car
                </div>
                <div class="userfield1car">
                    car1
                </div>
            </div>
        </div>
        <div class="product-title">
            product-title
        </div>
    </div>

Answer 1

试试这个：

.product-details .overlay {
        position: absolute;
    top: 8px;
    left: 7px;
    width: 14.8%;
    height: 29%;
    opacity: 0;
    border-radius: 0;
    background: #000;
    color: #fff;
    /* vertical-align: middle; */
    -webkit-transition: opacity 500ms;
    -moz-transition: opacity 500ms;
    -o-transition: opacity 500ms;
    transition: opacity 500ms;
}

Answer 2

您需要更改标记并将 Inst1 Inst2 /* ----- Start of SVC critical section -----*/ Update state atomically. -- Another SVC may also update same state so updates to state should prevent execution of any other SVC in the core /* ---- End of critical section ----*/ 元素包含在.overlay内。

<强> JSFIDDLE

＆＃13;

＆＃13;

.image-video-linkmas

＆＃13;

.image-video-linkmas {
  position: relative;
  display: inline-block;
}
.image-video-linkmas img {
  max-width: 100%;
  max-height: 236px;
  margin: 0;
  position: relative;
  vertical-align: middle;
  padding: 0px;
}
.image-video-linkmas:hover .overlay {
  opacity: 1;
}
.image-video-linkmas .overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  border-radius: 0;
  background: #000;
  color: #fff;
  /*vertical-align: middle;*/
  -webkit-transition: opacity 500ms;
  -moz-transition: opacity 500ms;
  -o-transition: opacity 500ms;
  transition: opacity 500ms;
  /*padding: 25px;
    text-align: center;*/
}

＆＃13;

＆＃13;

＆＃13;