Overlap text in an image with flex box

Question

Overlap text in an image with flex box

Navigation

#1 by (0 votes)

1

I'm having trouble overlapping the text in an image using flex box, could you 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

asked by anonymous 14.04.2018 / 18:53

1 answer

Expand div and call other content asynchronously [closed] Node Js - node-soap

score 0 · Answer 1

You forgot to include div .slide_item_desc . It is this div that is above the image with the texts, as referenced in several sections of CSS:

.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 you got now with this div :

I've 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>