html – Cropped image gallery doesn't allow div overlay to display text over images-ThrowExceptions

Exception or error:

In my HTML and CSS image gallery I want to have text displayed over the images. However I only manage to get the text below the images.

Here is the html code:

<div class="fleft imgdiv">
    <div>Image Name</div>
    <img class="galleryimg op80" src='http://qnimate.com/wp-content/uploads/2014/03/images2.jpg'>
</div>
<!-- repeats many many times -->

Here I use only very little CSS and the only thing I try to do is make the text Image Name show up over the images rather than below them.

Here is the CSS I’m using:

.fleft{
  float:left;
}
.imgdiv {
  width:24%;
  height:150px;
  position:relative;
  overflow:hidden;
  margin:0.5%;
}
.imgdiv .galleryimg {
  min-width:100%;
  min-height:100%;
  height:auto;
  position:relative;
  top:50%;
  left:50%;
  transform:translateY(-50%) translateX(-50%);
}
.op80{
  opacity:0.5;
}

Here is a jsFiddle for better understanding what the problem is. The op80 makes the Image slightly transparent and enables us to see the text below

JS Fiddle Example

What am I doing wrong here and how I can get the text appear in front of the images rather than below them?

How to solve:

Add a Z-Index property to both your image and text elements.
You need to create a class for your text div. I called this one flying-text, as an example.

    .fleft{
      float:left;
    }
    .imgdiv {
      width:100%;
      height:auto;
      position:relative;
      overflow:hidden;
      margin:0.5%;
    }
    .imgdiv .galleryimg {
      min-width:100%;
      min-height:100%;
      height:auto;
      position:relative;
      top:50%;
      left:50%;
      transform:translateY(-50%) translateX(-50%);
      z-index:0;
    }
    .op80{
      opacity:1;
    }

    .flying-text {
      color: red; 
      z-index:1;
      position: relative;
      text-align: center;
      font-size: 2rem;
    }
<div class="fleft imgdiv"> <div class="flying-text">Sleepy Cat</div> <img class="galleryimg op80" src='https://www.humanesociety.org/sites/default/files/styles/1240x698/public/2018/06/cat-217679.jpg'></div>

Source

###

To get the text over the image you really just need to make the child items (img and div) have absolute positioning and then you just have to rearrange your HTML so that the text comes after the img. I see too you’re trying to center the image within the div even if it’s bigger – the top, left, and transform css you have will work fine for that but again the items need to have absolute positioning so I think that is your main problem.

Side note on the position CSS property – it should be that an ancestor is marked as relative and descendants items absolute, as to absultely position children, relative to the parent.

.fleft{
  float:left;
}
.imgdiv {
  width:24%;
  height:150px;
  position:relative;
  overflow:hidden;
  margin:0.5%;
}
.imgdiv .galleryimg {
  min-width:100%;
  min-height:100%;
  height:auto;
  top:50%;
  left:50%;
  transform:translateY(-50%) translateX(-50%);
  opacity: .5;
}
.imgdiv .galleryimg, .imgdiv div {
  position: absolute;
}
<div class="fleft imgdiv">
	<img class="galleryimg op80" src='https://image.shutterstock.com/image-vector/example-signlabel-features-speech-bubble-260nw-1223219848.jpg'>
  <div>Image Name</div>
</div>
<div class="fleft imgdiv">
	<img class="galleryimg op80" src='https://image.shutterstock.com/image-vector/example-signlabel-features-speech-bubble-260nw-1223219848.jpg'>
  <div>Image Name</div>
</div>

###

By in front of the images do you mean to center the text in the image? If so you could just center the div for the HTML

Leave a Reply

Your email address will not be published. Required fields are marked *