Overlay text on an image with flex box

Asked

Viewed 1,116 times

1

I’m having trouble overlapping the text in an image using flex box, could give me a light for this problem.

*, *:after, *:before{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

embed,
video,
iframe,
iframe[style]{
    max-width: 100%;
    height: auto;
}

img{
    max-width: 100%;
    vertical-align: middle;
    margin: 0;
}

a img {
    border: none;
    margin: 0;
}

.container{display: flex; width: 100%;}
.content{width: 90%; margin:2% 5%;}

.slide{
    padding: 0 !important;
    display: flex;
    position: relative;
/*     background: #000; */
}

.slide_item{
    display: flex;
    width: 100%;
    position: relative;
}

.slide_item.first{
    display: block;
}

.slide_item_desc{
    display: flex;
    flex-direction: column;
    align-content: center;
    justify-content: center;
    color: #fff;
    position: absolute;
    bottom: 33%;   
}

.slide_item_desc h1{
    font-size: 3.125em;
    font-weight: 600;
    margin-bottom: 50px;
}

.slide_item_desc a{
    color: inherit;
    text-decoration: none;
    
}

.slide_item_desc p a{
  text-decoration: none !important;
}

.slide_item_desc p{
    font-size: 0.825em;
    color: #eee;
}

.btn {}
.btn_golden{
   border: 5px solid #F7C043;
    padding: 15px 60px;
    font-size: 1.25em;
    font-weight: bold;
    text-transform: uppercase;
    background: none;
}
<section class="container slide">
   <article class="slide_item content">
       <div class="slide_item">
           <a href="">
               <picture>
               <source srcset="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ1X23O4pvIMQ9kKLJwLQfq4tKHkTTHqyi8SZ8feRv-sAlzzDru4w" media="(min-width: 960px)">
               <img srcset="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ1X23O4pvIMQ9kKLJwLQfq4tKHkTTHqyi8SZ8feRv-sAlzzDru4w" alt="" title="" />
               </picture>
           </a>
           <p><a href="">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi, labore!</a></p>
           <h1><a href="http://">Lorem ipsum dolor sit amet.</a></h1>
           <p><a class="btn btn_golden" href="">Call to Action</a ></p>
       </div>
   </article>
 </section>

css css3 flexbox

  • If possible post the code you have tried.

  • I went to codepen, sorry for the delay follow the link https://codepen.io/lopesboa/pen/PRrmME

  • Apply a position:absolute within all elements of div.slide_item

  • If I apply position:Absolute to div.slide_item td is floating, just like image tbem, so I applied only to div.slide_item_desc which is where all the text is

  • Then you just fix the top and left of the elements within of div cited. You can also add the image as background of div.slide_item

1 answer

0

You forgot to include the div .slide_item_desc. That’s the one div above the image with the text, as referenced in various CSS snippets:

.slide_item_desc{
    display: flex;
    flex-direction: column;
    align-content: center;
    justify-content: center;
    color: #fff;
    position: absolute;
    bottom: 33%;
    width: inherit;
    top: 0; 
}

.slide_item_desc h1{
    /*font-size: 3.125em;*/
    font-size: 2em;
    font-weight: 600;
    margin-bottom: 50px;
}

.slide_item_desc a{
    color: inherit;
    text-decoration: none;

}

.slide_item_desc p a{
  text-decoration: none !important;
}

.slide_item_desc p{
    font-size: 0.825em;
    color: #eee;
}

See how it is now with the referred div:

I changed the image for better viewing.

*, *:after, *:before{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

embed,
video,
iframe,
iframe[style]{
    max-width: 100%;
    height: auto;
}

img{
    max-width: 100%;
    vertical-align: middle;
    margin: 0;
}

a img {
    border: none;
    margin: 0;
}

.container{display: flex; width: 100%;}
.content{width: 90%; margin:2% 5%;}

.slide{
    padding: 0 !important;
    display: flex;
    position: relative;
/*     background: #000; */
}

.slide_item{
    display: flex;
    width: 100%;
    position: relative;
}

.slide_item.first{
    display: block;
}

.slide_item_desc{
    display: flex;
    flex-direction: column;
    align-content: center;
    justify-content: center;
    color: #fff;
    position: absolute;
    bottom: 33%;
    width: inherit;
    top: 0; 
}

.slide_item_desc h1{
    /*font-size: 3.125em;*/
    font-size: 2em;
    font-weight: 600;
    margin-bottom: 50px;
}

.slide_item_desc a{
    color: inherit;
    text-decoration: none;
    
}

.slide_item_desc p a{
  text-decoration: none !important;
}

.slide_item_desc p{
    font-size: 0.825em;
    color: #eee;
}

.btn {}
.btn_golden{
   border: 5px solid #F7C043;
    padding: 15px 60px;
    font-size: 1.25em;
    font-weight: bold;
    text-transform: uppercase;
    background: none;
}
<section class="container slide">
   <article class="slide_item content">
       <div class="slide_item">
           <a href="">
               <picture>
               <source srcset="https://www.cleverfiles.com/howto/wp-content/uploads/2016/08/mini.jpg" media="(min-width: 960px)">
               <img srcset="https://www.cleverfiles.com/howto/wp-content/uploads/2016/08/mini.jpg" alt="" title="" />
               </picture>
           </a>
           <div class="slide_item_desc">
              <p><a href="">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi, labore!</a></p>
              <h1><a href="http://">Lorem ipsum dolor sit amet.</a></h1>
              <p><a class="btn btn_golden" href="">Call to Action</a ></p>
           </div>
       </div>
   </article>
 </section>

Browser other questions tagged css css3 flexbox

You are not signed in. Login or sign up in order to post.