[ANSWERED] html – CSS : Position Text over image in Flexbox

Question 1

Is this what you asked for?

.flexbox{
position: relative;
display: flex;
flex-direction: row;
width: 100%;
max-height: 80vh;
}

.container{
  cursor: pointer;
  width: 34%;
  max-height: 70vh;
  display:block;
  text-align: center;

}

.image-category{
  width: 100%;
  opacity: 1;
  max-height: inherit;
  transition:  0.5s;
  overflow: hidden;
}

.image-description{
  transform: translateY(-50vh);
  font-size: 25px;
  font-family: 'Comic Sans MS';
  font-weight: 900;
  opacity: 0;
  transition:  0.6s;
}

.container:hover .image-description{
  opacity: 100;
}

.container:hover .image-category{
  opacity: 0.6;
}

<div class="flexbox" id="flex">

        <div class="container" id="box1">
          <img class="image-category" id="product3" src="https://img.fotocommunity.com/landschaft-geht-auch-hochkant-0d77b881-6996-4001-bbd4-74ec6b27f14e.jpg?height=1080">
          <div class="image-description">
            <p class="description">Example 1</p>
          </div>
        </div>

        <div class="container" id="box2">
          <img class="image-category" id="product2" src="https://img.fotocommunity.com/landschaft-geht-auch-hochkant-0d77b881-6996-4001-bbd4-74ec6b27f14e.jpg?height=1080">
          <div class="image-description">
            <p class="description">Example 2</p>
          </div>
        </div>

        <div class="container" id="box3">
          <img class="image-category" id="product3" src="https://img.fotocommunity.com/landschaft-geht-auch-hochkant-0d77b881-6996-4001-bbd4-74ec6b27f14e.jpg?height=1080">
          <div class="image-description">
            <p class="description">Example 3</p>
          </div>

</div>

Question 2

Add absolute position to description and relative to container.

.flexbox {
  position: relative;
  display: flex;
  flex-direction: row;
  width: 100%;
  max-height: 80vh;
}

.container {
  width: 34%;
  max-height: 70vh;
  display: block;
  text-align: center;
  position: relative;
}

.image-category {
  width: 100%;
  opacity: 0.6;
  max-height: inherit;
  overflow: hidden;
}
.description {
position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity:0;
  }
 .container:hover .description {
  opacity:100; 
 }

<div class="flexbox" id="flex">

  <div class="container" id="box1">
    <img class="image-category" id="product3" src="https://img.fotocommunity.com/landschaft-geht-auch-hochkant-0d77b881-6996-4001-bbd4-74ec6b27f14e.jpg?height=1080">
    <div class="image-description">
      <p class="description">Example 1</p>
    </div>
  </div>

  <div class="container" id="box2">
    <img class="image-category" id="product2" src="https://img.fotocommunity.com/landschaft-geht-auch-hochkant-0d77b881-6996-4001-bbd4-74ec6b27f14e.jpg?height=1080">
    <div class="image-description">
      <p class="description">Example 2</p>
    </div>
  </div>

  <div class="container" id="box3">
    <img class="image-category" id="product3" src="https://img.fotocommunity.com/landschaft-geht-auch-hochkant-0d77b881-6996-4001-bbd4-74ec6b27f14e.jpg?height=1080">
    <div class="image-description">
      <p class="description">Example 3</p>
    </div>

  </div>

Question 3

I would approach this with using flexbox on the container and change the display property of the text. using Flexbox makes it easier to align the text horizontally and vertically. Code is commented.

.flexbox {
  position: relative;
  display: flex;
  flex-direction: row;
  width: 100%;
  max-height: 80vh;
}

.container {
  width: 34%;
  max-height: 70vh;
  display: flex;
  flex-flow: row nowrap;
  /*horizontal alignment*/
  text-align: center;
  justify-content: center;
  /*vertical alignment*/
  align-items: center;
}

.image-category {
  width: 100%;
  opacity: 0.6;
  max-height: inherit;
  overflow: hidden;
}
/*absolute works because there is no other positioning applied to the text. As long as it stays that way the text is still responding to the flexbox properties even if its technically removed from the flexbox */
.image-description {
  position: absolute;
  display: none;
}
.container:hover {
  cursor: pointer;
}
.container:hover .image-description{
  display: block;
}

<div class="flexbox" id="flex">
  <div class="container" id="box1">
    <img class="image-category" id="product3" src="https://img.fotocommunity.com/landschaft-geht-auch-hochkant-0d77b881-6996-4001-bbd4-74ec6b27f14e.jpg?height=1080">
    <div class="image-description">
      <p class="description">Example 1</p>
    </div>
  </div>

  <div class="container" id="box2">
    <img class="image-category" id="product2" src="https://img.fotocommunity.com/landschaft-geht-auch-hochkant-0d77b881-6996-4001-bbd4-74ec6b27f14e.jpg?height=1080">
    <div class="image-description">
      <p class="description">Example 2</p>
    </div>
  </div>

  <div class="container" id="box3">
    <img class="image-category" id="product3" src="https://img.fotocommunity.com/landschaft-geht-auch-hochkant-0d77b881-6996-4001-bbd4-74ec6b27f14e.jpg?height=1080">
    <div class="image-description">
      <p class="description">Example 3</p>
    </div>

  </div>

Question 4

I think you can do like this

  .flexbox {
  position: relative;
  display: flex;
  flex-direction: row;
  width: 100%;
  max-height: 80vh;
}

.container {
  width: 34%;
  max-height: 70vh;
  display: block;
  text-align: center;
  position: relative;
}

.image-category {
  width: 100%;
  opacity: 0.6;
  max-height: inherit;
  overflow: hidden;
}
.image-description{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

<div class="flexbox" id="flex">

    <div class="container" id="box1">
      <img class="image-category" id="product3" src="https://img.fotocommunity.com/landschaft-geht-auch-hochkant-0d77b881-6996-4001-bbd4-74ec6b27f14e.jpg?height=1080">
      <div class="image-description">
        <p class="description">Example 1</p>
      </div>
      
    </div>
  
    <div class="container" id="box2">
      <img class="image-category" id="product2" src="https://img.fotocommunity.com/landschaft-geht-auch-hochkant-0d77b881-6996-4001-bbd4-74ec6b27f14e.jpg?height=1080">
      <div class="image-description">
        <p class="description">Example 2</p>
      </div>
    </div>
  
    <div class="container" id="box3">
      <img class="image-category" id="product3" src="https://img.fotocommunity.com/landschaft-geht-auch-hochkant-0d77b881-6996-4001-bbd4-74ec6b27f14e.jpg?height=1080">
      <div class="image-description">
        <p class="description">Example 3</p>
      </div>
  
    </div>

Question 5

Here is the answer of your question..
You can place your text over image as maintaining the position as absolute. So, here is the code.

.flexbox {
  position: relative;
  display: flex;
  flex-direction: row;
  width: 100%;
  max-height: 80vh;
}

.container {
  width: 34%;
  max-height: 70vh;
  display: block;
  text-align: center;
}

.image-category {
  width: 100%;
  opacity: 0.6;
  max-height: inherit;
  overflow: hidden;
}

**.description {
  position: absolute;
  top: 50%;
  margin-left: 13%;
  bottom: 50%;
  display: none;
}

.container:hover .description {
  display: block;
}

**

<div class="flexbox" id="flex">

  <div class="container" id="box1">
    <img class="image-category" id="product3" src="https://img.fotocommunity.com/landschaft-geht-auch-hochkant-0d77b881-6996-4001-bbd4-74ec6b27f14e.jpg?height=1080">
    <div class="image-description">
      <p class="description">Example 1</p>
    </div>
  </div>

  <div class="container" id="box2">
    <img class="image-category" id="product2" src="https://img.fotocommunity.com/landschaft-geht-auch-hochkant-0d77b881-6996-4001-bbd4-74ec6b27f14e.jpg?height=1080">
    <div class="image-description">
      <p class="description">Example 2</p>
    </div>
  </div>

  <div class="container" id="box3">
    <img class="image-category" id="product3" src="https://img.fotocommunity.com/landschaft-geht-auch-hochkant-0d77b881-6996-4001-bbd4-74ec6b27f14e.jpg?height=1080">
    <div class="image-description">
      <p class="description">Example 3</p>
    </div>

Question 6

I have a flexbox with 3 Images that I already could shape to have the same width and height. Now I’d like to add a text that is centered in each image. My final goal is to add a hover effect, so the text appears on hover.

From some other tutorials I figured that I would need to add the paragraph into another div. However I do not manage to “overlap” the text container above the corresponging image. Anyone have any tips or tricks on how to best accomplish this?

.flexbox {
  position: relative;
  display: flex;
  flex-direction: row;
  width: 100%;
  max-height: 80vh;
}

.container {
  width: 34%;
  max-height: 70vh;
  display: block;
  text-align: center;
}

.image-category {
  width: 100%;
  opacity: 0.6;
  max-height: inherit;
  overflow: hidden;
}

<div class="flexbox" id="flex">

  <div class="container" id="box1">
    <img class="image-category" id="product3" src="https://img.fotocommunity.com/landschaft-geht-auch-hochkant-0d77b881-6996-4001-bbd4-74ec6b27f14e.jpg?height=1080">
    <div class="image-description">
      <p class="description">Example 1</p>
    </div>
  </div>

  <div class="container" id="box2">
    <img class="image-category" id="product2" src="https://img.fotocommunity.com/landschaft-geht-auch-hochkant-0d77b881-6996-4001-bbd4-74ec6b27f14e.jpg?height=1080">
    <div class="image-description">
      <p class="description">Example 2</p>
    </div>
  </div>

  <div class="container" id="box3">
    <img class="image-category" id="product3" src="https://img.fotocommunity.com/landschaft-geht-auch-hochkant-0d77b881-6996-4001-bbd4-74ec6b27f14e.jpg?height=1080">
    <div class="image-description">
      <p class="description">Example 3</p>
    </div>

  </div>

Bollate

[ANSWERED] html – CSS : Position Text over image in Flexbox

By

Solution 1 :

Solution 2 :

Solution 3 :

Solution 4 :

Solution 5 :

Problem :

By

Related Post

[ANSWERED] java – How to send dropdown value to servlet NOT the option text

[ANSWERED] html – How to include a clickable image behind a link

[ANSWERED] html – Move list item to the left in header/navigation menu

You missed

[ANSWERED] javascript – Text box to display updated text and save on button click

[ANSWERED] javascript – Pass html tag to angularjs variable from controller

[ANSWERED] html – bootstrap mobile menu not scrolling instead the background is scrolling

[ANSWERED] html – How to play live stream YouTube videos using CEF4Delphi?

Bollate