superimpose text in the background

Question

superimpose text in the background

Navigation

#1 by (0 votes)

1

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

html css

asked by anonymous 24.10.2017 / 02:44

1 answer

Creating table schema with pre-defined keywords Get modal data in Django

score 0 · Answer 1

To achieve this effect you need:

Do not apply such a large width dimension to the image (at least here in the snippet)
Remove the margins of each div within flex so they stay together
Apply background color and left spacing to div with 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 center the texts in the right-hand%%, just add <div> to the text-align:center selector and .event_title h4