Heading with overlay effect (How to)

[Georgich]

How to achieve this effect with heading element?

I saw something like this on https://paperpillar.com/ and heading got this code:

.section-title h2 {
transform: translateX(-50%);
position: absolute;
top: 0;
left: 50%;
}

I want to this in cornerstone. Then i’m playin’ with SubHeadline margin - it breaks cornerstone view a little bit. How to achieve dat without margin using transform & code above?

[Georgich]

OMG OMG OMG ) Done it by myself! ))

$el .x-text-content-text-subheadline {
  display: flex !important;
  -webkit-transform: translateX(-50%) !important;
  transform: translateX(-50%) !important;
  position: absolute !important;
  top: 50px !important;
  left: 50% !important;  
}

The result:

[Georgich]

Now trully centered

$el .x-text-content-text-subheadline {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  -webkit-transform: translate(-50%, -50%) !important;
  transform: translate(-50%, -50%) !important;
  margin: 0 !important;
  padding: 0 !important;
}

[Georgich]

Clean code

$el .x-text-content-text-subheadline {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  -webkit-transform: translate(-50%, -50%) !important;
  transform: translate(-50%, -50%) !important;
  margin: 0 !important;
}