raulbaros raulbaros - 3 months ago 11
CSS Question

Horizontally center image and use max width overlay also when image width is smaller

My image is inside a

well
which has fixed width fixed.


  1. (1) How to get my image always horizontally centered (I tried using
    margin:0 auto
    but it didnt work).

  2. (2) Also I have an
    .overlay

    and it works for all my other images (which have the
    max-width:300px
    , but for images as in example with smaller width,
    I need the overlay to also cover a full max-width of the
    well
    (now as in this example, the overlay is limited to the width of these smaller-width images). How to make
    these 2 things possible?





.image-video-linkcar {
position: relative;
display: inline-block;
}

.image-video-linkcar img {
max-width: auto;
max-height: 230px;
margin: 0;
padding: 0;
vertical-align: middle;
}

.categorycar {
font-size: 10px;
font-weight: 700;
font-family: 'Montserrat',sans-serif;
font-style: bold;
text-align: center;
color: #777;
margin-left: 15px;
outline: 1px solid #fff;
padding: 2px 20px 2px 8px;
background-color: #FFF;
opacity: .9;
position: absolute;
opacity: .7;
bottom: 0;
right: 0;
min-height: 0;
}

.brandcar {
font-size: 10px;
font-weight: 700;
font-family: 'Montserrat',sans-serif;
font-style: bold;
text-align: center;
color: #777;
margin-left: 15px;
outline: 1px solid #fff;
padding: 2px 20px 2px 8px;
background-color: #fff;
opacity: .9;
position: absolute;
opacity: .7;
top: 0;
right: 0;
min-height: 0;
}

.image-video-linkcar:hover .overlay {
opacity: 1;
}


.well.carousel {
width: 100%;
height: auto;
height: 420px;
width: 400px;
padding: 0;
margin: 0;
border: none;
background-color:red
}




.product-detailscar .overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
border-radius: 0;
background: #F7F7F7;
color: #FFF;
padding: 10px;
border-top: 1px solid #A10000;
border-bottom: 1px solid #A10000;
/*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 carousel">
<div class="product-detailscar">
<div class="image-video-linkcar">
<img alt="#" src=
"http://lorempixel.com/100/200">
<div class="brandcar">
BRAND
</div>
<div class="categorycar">
CATEGORY
</div>
<div class="overlay">
<div class="subcategorycar">
SUBCAT
</div>
<div class="idcar">
ID
</div>




Answer

You need to move the overlay out of the .product-detailscar div.

.well {
  width: 300px;
  background: orange;
  position: relative;
  text-align: center;
}
.image-video-linkcar {
  position: relative;
  display: inline-block;
}
.image-video-linkcar img {
  max-width: auto;
  max-height: 230px;
  margin: 0;
  padding: 0;
  vertical-align: middle;
}
.categorycar {
  font-size: 10px;
  font-weight: 700;
  font-family: 'Montserrat', sans-serif;
  font-style: bold;
  text-align: center;
  color: #777;
  margin-left: 15px;
  outline: 1px solid #fff;
  padding: 2px 20px 2px 8px;
  background-color: #FFF;
  opacity: .9;
  position: absolute;
  opacity: .7;
  bottom: 0;
  right: 0;
  min-height: 0;
}
.brandcar {
  font-size: 10px;
  font-weight: 700;
  font-family: 'Montserrat', sans-serif;
  font-style: bold;
  text-align: center;
  color: #777;
  margin-left: 15px;
  outline: 1px solid #fff;
  padding: 2px 20px 2px 8px;
  background-color: #fff;
  opacity: .9;
  position: absolute;
  opacity: .7;
  top: 0;
  right: 0;
  min-height: 0;
}
.well:hover .overlay {
  opacity: 1;
}
.well .overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  border-radius: 0;
  background: rgba(0, 255, 0, .5);
  color: #FFF;
  padding: 10px;
  border-top: 1px solid #A10000;
  border-bottom: 1px solid #A10000;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="well carousel">
  <div class="product-detailscar">
    <div class="image-video-linkcar">
      <img alt="#" src="http://www.fillmurray.com/100/200">
      <div class="brandcar">
        BRAND
      </div>

      <div class="categorycar">
        CATEGORY
      </div>

    </div>
  </div>
  <div class="overlay">
    <div class="subcategorycar">
      SUBBBBBBCATEGORY
    </div>

    <div class="idcar">
      IDDDDCAR
    </div>
  </div>
</div>