TransWikia.com

Sobrepor texto em uma imagem com flex box

Stack Overflow em Português Asked by Lopes Boa on September 26, 2021

Estou com dificuldade em sobrepor o texto em uma imagem usando flex box, poderiam me dar uma luz para esse problema.

*, *: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>

One Answer

Você esqueceu de incluir a div .slide_item_desc. É essa div que fica por cima da imagem com os textos, conforme referenciado em vários trechos do 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;
}

Veja como ficou agora com a referida div:

Troquei a imagem para melhor visualização.

*, *: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>

Answered by Sam on September 26, 2021

Add your own answers!

Ask a Question

Get help from others!

© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP