Image overlay on responsive sized images bootstrap

Question

I am trying to create a responsive grid of images  with descriptions  that when moused over will have a color overlay  just the image and not the text   Because of the responsive heights of the images  I am having an issue where the overlay covers everything and not just the image   Any way I can fix this   I ve recreated the issue here for easier understanding  http   jsfiddle net r8rFc   Here is my HTML    lt div class  row  gt        lt div class  col-xs-12 col-sm-6 col-md-3 project  gt           lt a href     gt               lt div gt                   lt img src  http   placehold it 500x500  class  img-responsive   gt                   lt div class  fa fa-plus project-overlay  gt  lt  div gt               lt  div gt               lt div style  text-align center   gt                   lt h3 gt Project name lt  h3 gt                   lt p gt Image description lt  p gt               lt  div gt           lt  a gt       lt  div gt    lt  div gt    And my CSS    project-overlay       position  absolute      top  0      width  100       height  100       background-color  rgba 41 128 185 0 9       color   fff      padding  50       Thanks in advance

User · Answer

I had a bit of trouble getting this to work as well. Using brouxhaha's answer got me 90% of the way to what I was looking for. But the padding adjust wouldn't allow me to put the text anywhere I wanted. Using top and left seemed to work better for my purposes.

.project-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    color: #fff;
    top: 80%;
    left: 20%;
}

http://jsfiddle.net/1rz0b7d8/1/

User · Answer

Add a class to the containing div  then set the following css on it    img-overlay       position  relative      max-width  500px    whatever your max-width should be      position  relative is required on a parent element of children with position  absolute for the children to be positioned in relation to that parent   DEMO

User · Answer

lt div class  col-md-4 py-3 pic-card  gt             lt div class  card   gt             lt div class  pic-overlay  gt  lt  div gt             lt img class  img-fluid   src  images Site Images Health  amp  Fitness-01 png  alt    gt             lt div class  centeredcard  gt               lt h3 gt                 lt span class  card-headings  gt HEALTH  amp  FITNESS lt  span gt               lt  h3 gt               lt div class  content-inner mt-5  gt                 lt p class  lead  p-overlay  gt Lorem ipsum dolor sit amet  consectetur adipisicing elit  Recusandae ipsam nemo quasi quo quae voluptate  lt  p gt               lt  div gt             lt  div gt             lt  div gt           lt  div gt     pic-card       position  relative        pic-overlay       top  0      left  0      right 0      bottom 0      width  100       height  100       position  absolute      transition  background-color 0 5s ease        content-inner      position  relative       display  none        pic-card hover        pic-overlay          background-color   dark-overlay                 content-inner           display  block           cursor  pointer                card-headings          font-size  15px          padding  0                card-headings  after          content              width  80           border-bottom  solid 2px  rgb 52  178  179           position  absolute          left  5           top  25           z-index  1               p-overlay           font-size  15px               enter code here

User · Answer

When you specify position absolute it positions itself to the next-highest element with position relative  In this case  that s the  project div    If you give the image s immediate parent div a style of position relative  the overlay will key to that instead of the div which includes the text   For example  http   jsfiddle net 7gYUU 1      lt div class  parent  gt       lt img src  http   placehold it 500x500  class  img-responsive   gt       lt div class  fa fa-plus project-overlay  gt  lt  div gt    lt  div gt    parent      position  relative

User · Answer

If i understand your question you want to have the overlay just over the image and not cover everything   I d set the parent DIV  i renamed in content in the jsfiddle  position to relative  as the overlay should be positioned relative to this div not the window    content     position  relative      I did some pocking around and updated your fiddle to just have the overlay sized to the img which  I think  is what you want  let me know anyway    http   jsfiddle net b9Vyw

[html] Image overlay on responsive sized images bootstrap

Examples related to html

Examples related to css

Examples related to responsive-design

Examples related to twitter-bootstrap-3