overlay text in background

Asked

Viewed 908 times

2

How do I put half the text on top of the blue background?

.event_background {
	background: #bdecef;
}
.flexbox_grid {
	display: flex;
}
.flexbox_event_image {
  	width: 70.0%;
  	margin: 1%;
}
.flexbox_event_description {
	width: 30.0%;
  	margin: 1%;	
}
.flexbox_event_cort {
    width: 700px;
	height: 350px;
	overflow: hidden;
}
.flexbox_event_cort img {
   width: auto;
}
.event_align {
	padding-top: 40px;
}
.event_data {
	font: 600 12px/18px "b";
	font-family: Ubuntu Condensed;
	padding-bottom: 15px;
}
.event_day{
	margin-right: 8px;
    font: 400 16px/18px Ubuntu Condensed;
    color: #ee5949;
    font-style: italic;
}
.event_title h4 {
	position: relative;
    text-transform: uppercase;
    color: #0c2044;
    font: 700 30px/30px "b";
    font-family: Ubuntu Condensed;
    letter-spacing: 0;
    padding-bottom: 15px;
}
<div class="flexbox_grid">
	<div class="flexbox_event_image event_background">
		<div class="flexbox_event_cort">
			<img  src="https://guia-static.gazetadopovo.com.br/materias/repositorio/1503068879.jpeg" alt="">
		</div>
	</div>
	<div class="flexbox_event_description event_align">
		<div class="event_data"><span class="event_day">Domingo</span> 22-10-2017</div>
		<div class="event_title"><h4>Villa Mix</h4></div>
		<div class="event_title"><h4>Exprotrade Pinhais</h4></div>
	</div>
</div>

In this way inserir a descrição da imagem aqui

html css

  • "put half the text on top of the blue background?" What do you mean ? I only see a background with an image

  • I put up a picture, it’s like that

1 answer

0

To achieve this effect you need to:

  • Do not apply such a large width dimension to the image (at least here in the snippet)
  • Remove the margins of each div within the flex so that they stay together
  • Apply background color and left spacing in the div with the texts

It is important to mention that the sum of the widths should be 100%, and both padding, margin and border count towards that width.

Example: 

.event_background {
  background: #bdecef;
}

.flexbox_grid {
  display: flex;
}

.flexbox_event_image {
  width: 65%; /*agora 65%*/
  /*margin: 1%;*//*sem margin*/
}

.flexbox_event_description {
  width: 35%;
  background-color:#73d8e8; /*azul de fundo*/
  padding-left:5%; /*padding 5% aqui para que as letras nao fiquem coladas a esquerda*/
  /*margin: 1%;*//*sem margin*/
}

.flexbox_event_cort {

  overflow: hidden;
}

.flexbox_event_cort img {
  width: auto;
}

.event_align {
  padding-top: 40px;
}

.event_data {
  font: 600 12px/18px "b";
  font-family: Ubuntu Condensed;
  padding-bottom: 15px;
}

.event_day {
  margin-right: 8px;
  font: 400 16px/18px Ubuntu Condensed;
  color: #ee5949;
  font-style: italic;
}

.event_title h4 {
  position: relative;
  text-transform: uppercase;
  color: #0c2044;
  font: 700 30px/30px "b";
  font-family: Ubuntu Condensed;
  letter-spacing: 0;
  padding-bottom: 15px;
}
<div class="flexbox_grid">
  <div class="flexbox_event_image event_background">
    <div class="flexbox_event_cort">
      <img src="https://guia-static.gazetadopovo.com.br/materias/repositorio/1503068879.jpeg" alt="">
    </div>
  </div>
  <div class="flexbox_event_description event_align">
    <div class="event_data"><span class="event_day">Domingo</span> 22-10-2017</div>
    <div class="event_title">
      <h4>Villa Mix</h4>
    </div>
    <div class="event_title">
      <h4>Exprotrade Pinhais</h4>
    </div>
  </div>
</div>

If you want to focus the texts on <div> from the right just add text-align:center to the selector .event_title h4 and to the .event_data

Browser other questions tagged html css

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