raulbaros raulbaros - 3 months ago 8
CSS Question

Make overlay only over image

I am trying to make my black overlay with text only to be over my image itself (and not over, well, everything else also as is now). Is it possible what I aim to do? When the black overlay shows it also covers my product-title and that is wrong.



.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

You need to change your markup and wrap your .overlay element inside the .image-video-linkmas one.


JSFIDDLE


.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;*/
}
<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 class="overlay">
          <div class="intro-descriptioncar">
            intro-car
          </div>
          <div class="userfield1car">
            car1
          </div>
        </div>
      </div>

    </div>
    <div class="product-title">
      product-title
    </div>
  </div>

Comments