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>
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
Get help from others!
Recent Answers
Recent Questions
© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP