I am new to CSS and I want to put text "MOUNTAINS" behind the mountain in the background image. Like the below image.
Home section image
This is the existing code
#home{
height: 100%;
position: relative;
padding: 0;
}
#home-img{
background: url("../img/home/1.jpg");
background-size: cover;
top: 50%;
left: 50%;
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -1;
}
#home-content{
position: absolute;
top:50%;
left: 50%;
transform: translate(-50%, -50%);
letter-spacing: 1px;
line-height: 124px;
color: #4d4d4d;
font-family: 'Bebas Neue', cursive;
}
#home-content #first-title{
color: rgb(77, 77, 77);
}
#home-content #second-title{
color: rgb(65, 79, 107);
}
#home-content h1{
font-size: 115px;
margin-left: -25%;
margin-top: -8%;
}
<section id="home" class="col-md-12">
<!-- Background Image -->
<div id="home-img" class="col-md-12">
</div>
<!-- Home Content -->
<div id="home-content">
<h1 id="first-title">LOSANGELES</h1>
<h1 id="second-title">MOUNTAINS</h1>
</div>
</section>
I am stuck with this. So can CSS expert help me to do this? Thank you
Hi please have a look to the snippet.
**z-index** and **position** are important key factors for this case
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body style="background-image: url(https://images.pexels.com/photos/53594/blue-clouds-day-fluffy-53594.jpeg);">
<div style="background-image: url(https://gallery.yopriceville.com/var/resizes/Free-Clipart-Pictures/Grass-Grounds-Coverings-PNG-Clipart/Green_Grass_PNG_Clip_Art_Image.png?m=1532246688);
background-repeat: no-repeat; height: 100vh; width: 100%; background-size: contain;
background-position: bottom; z-index: 8; position: relative;">
</div>
<h1 style="z-index: 0; position: absolute; font-size: 40vh; transform: translate(-50%, -50%); left: 50%; top: 25%; text-align: center;">Hello<br>Mountain </h1>
</body>
</html>
Here is a code. Try this and replace the files here with yours:
.box{
position: relative;
display: inline-block; /* Make the width of box same as image */
}
.box .text{
position: absolute;
z-index: 999;
margin: 0 auto;
left: 0;
right: 0;
text-align: center;
top: 35%; /* Adjust this value to move the positioned div up and down */
font-family: Arial,sans-serif;
color: #000; /*Set your own colour*/
width: 60%; /* Set the width of the positioned div */
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Example of Text Block Over Image</title>
</head>
<body>
<div class="box">
<img src="https://www.tutorialrepublic.com/examples/images/kites.jpg" alt="Flying Kites">
<div class="text">
<h1>Flying Kites</h1>
</div>
</div>
</body>
</html>
I hope it helps.
Related
How can I position the arrow at the bottom of the container? I'm using Bootstrap-5 and just can't figure out all the position attributes for the life of it. It just sticks with the other text so far.
I have tried a variety of things, but some guidance how to go about this would be great.
Thanks for taking the time to help a beginner. :)
.hero {
position: relative;
overflow: hidden;
}
#media screen and (min-width: 992px) {
.hero {
height: 100vh;
}
.custom-video,
.news-detail-image {
object-fit: cover;
width: 100vw;
height: 100vh;
}
.sticky-wrapper {
position: relative;
bottom: 76px;
}
}
.heroText {
position: absolute;
z-index: 9;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 85%;
text-align: center;
}
.videoWrapper {
position: relative;
padding-bottom: 56.25%; /* 16:9 */
height: 0;
z-index: -100;
}
.custom-video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.8.0/font/bootstrap-icons.css">
<section class="hero" id="hero">
<div class="heroText container">
<h1 class=" text-white">TITLE OF MY PAGE</h1>
<h3 class="subtitle fancy hidden-phone text-white"><span>SUBTITLE</span></h3>
<i class="bi bi-arrow-down-short"></i>
</div>
<div class="videoWrapper">
<img src="https://i.picsum.photos/id/1/5616/3744.jpg?hmac=kKHwwU8s46oNettHKwJ24qOlIAsWN9d2TtsXDoCWWsQ" class="custom-video">
</div>
<div class="overlay"></div>
</section>
Here you go... I suggest you to wrap the arrow in a separate container.
The reason why your arrow couldn't be positioned at the bottom was that you should have set .heroText { height: 100%; ... }, but then your title and subtitle wouldn't be vertically centered.
See the snippet below.
.hero {
position: relative;
overflow: hidden;
}
#media screen and (min-width: 992px) {
.hero {
height: 100vh;
}
.custom-video,
.news-detail-image {
object-fit: cover;
width: 100vw;
height: 100vh;
}
.sticky-wrapper {
position: relative;
bottom: 76px;
}
}
.heroText {
position: absolute;
z-index: 9;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 85%;
text-align: center;
}
.videoWrapper {
position: relative;
padding-bottom: 56.25%;
/* 16:9 */
height: 0;
z-index: -100;
}
.custom-video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
#wrapper {
width: 100%;
}
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<title>Document</title>
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/bootstrap#5.1.1/dist/css/bootstrap.min.css' integrity='sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU' crossorigin='anonymous'>
<script src='https://cdn.jsdelivr.net/npm/bootstrap#5.1.1/dist/js/bootstrap.min.js' integrity='sha384-skAcpIdS7UcVUC05LJ9Dxay8AXcDYfBJqt1CJ85S/CFujBsIzCIv+l9liuYLaMQ/' crossorigin='anonymous'></script>
</head>
<body>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.8.0/font/bootstrap-icons.css">
<section class="hero" id="hero">
<div class="heroText container">
<h1 class=" text-white">TITLE OF MY PAGE</h1>
<h3 class="subtitle fancy hidden-phone text-white"><span>SUBTITLE</span></h3>
</div>
<div class="videoWrapper">
<img src="https://i.picsum.photos/id/1/5616/3744.jpg?hmac=kKHwwU8s46oNettHKwJ24qOlIAsWN9d2TtsXDoCWWsQ" class="custom-video">
</div>
<div class="overlay"></div>
<div id="wrapper" class='d-flex justify-content-center'>
<i class="bi bi-arrow-down-short"></i>
</div>
</section>
</body>
</html>
How can you get the text in the background? I would like the title (and other additional text to be in the background) Here is the html code:
This is how it looks at the moment, screenshot of not the whole screen, photo resolution 5498x3615
#title {
text-align: center;
font-family: Playbill;
font-weight: normal;
font-size: 40px;
}
.bg_image {
overflow: hidden;
position: relative;
max-width: 100%;
height: auto;
}
<body>
<h1 id="title">Путеводитель по городам</h1>
<img class="bg_image" src="https://via.placeholder.com/1200x600" alt="background for site">
</body>
You can set background-image and just put the text on top. Like this:
#title {
text-align: center;
font-family: Playbill;
font-weight: normal;
font-size: 40px;
}
body {
background-image: url(https://via.placeholder.com/1200x600);
background-size: cover; /* Size The Image */
background-position: center; /* Center The Image */
background-repeat: no-repeat;
}
<body>
<h1 id="title">Путеводитель по городам</h1>
</body>
I've got this responsive solution:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
position: relative;
}
#title {
text-align: center;
font-family: Playbill;
font-weight: normal;
font-size: 40px;
position: absolute;
z-index: 1;
top:50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
}
.bg_image {
overflow: hidden;
position: relative;
max-width: 100%;
height: auto;
display:block;
margin: 0 auto;
max-width: 100%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<div class="container">
<h1 id="title">Путеводитель по городам</h1>
<img class="bg_image" src="https://via.placeholder.com/1200x600" alt="background for site">
</div>
</body>
</html>
I'm developing a mobile HTML web page. One of the first tags on the HTML is:
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1">
When I examine this page on Chrome developer tools it looks just right, as I'm using mostly relative dimensions, however on the mobile device itself it looks like the UI is as twice larger then the emulation.
This is a simplified version of the HTML code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/app.css" />
<script src="./js/jquery.js"></script>
<script src="./js/utils.js"></script>
<title>Manager View</title>
</head>
<body>
<header>
<div id="burger"><img src="img/burger.png"></div>
<div id="title">Page Title</div>
<div id="logo"><img src="img/logo.jpg"></div>
</header>
<div id="main">
<table>
<tr>
<td><img src="img/icon1.png"></td>
<td><img src="img/icon2.png"></td>
</tr>
<tr>
<td><img src="img/icon3.png"></td>
<td><img src="img/icon4.png"></td>
</tr>
</table>
</div>
</body>
</html>
That's my CSS:
body{
display: flex;
flex-flow: column;
height: 100%;
overflow: hidden;
}
header {
background-color: #3465A9;
height: 7vh;
min-height: 100px;
display: flex;
flex-direction: row-reverse;
width: 100%;
color: white;
font-family: Arial;
font-size: 50pt;
min-width: 800px;
padding-bottom: 10px;
}
header #title{
line-height: 7vh;
padding-right: 50px;
}
header #burger{
height: 7vh;
min-height: 100px;
width: 7vh;
min-width: 100px;
position: relative;
}
header #burger img{
height: 80%;
min-height: 80px;
position: absolute;
top: 50%;
right: 50%;
transform: translate(50%, -50%);
}
header #logo{
height: 7vh;
min-height: 100px;
width: 7vh;
min-width: 200px;
position: absolute;
left: 0px;
}
header #logo img{
height: 80%;
min-height: 80px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
#main{
background: url("../img/bg.jpg");
}
#main table{
width: 80%;
table-layout:fixed;
min-width: 800px;
margin: auto;
margin-top: 20%;
}
table td{
width: 50%;
}
td img{
transform: translate(-10%, 0%);
}
Is there any way to see the actual size on Chrome Dev Tools? And how can I make sure it displays on the right size on the mobile device?
Thanks
I am trying to combine two pictures in HTML, but I am seeing the blank spot after using skewY in CSS. How can i make bottom image and white spot to combine it to fit in the design view?
Below is HTML. I am adding image 1 into <div class="header__bg"> and image 2 into <section class="main_image">.
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" href="HTMLPage2.css">
<meta charset="utf-8" />
<title></title>
</head>
<body>
<header>
<div class="header__bg"></div>
<h1>test</h1>
</header>
<section class="main_image">
<h1>Section Content</h1>
</section>
</body>
</html>
Below is CSS. I am trying to code to add 2 images make shape i want. I would like to see blank part to be part of bottom image.
header {
position: relative;
height: 300px;
overflow: hidden;
}
.header__bg {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url("GettyImages2.jpg");
transform: skewY(-6deg);
transform-origin: top left;
}
section.main_image {
background-image: url("GettyImages1.jpg");
}
h1 {
margin: 0;
padding: 100px 0;
font: 44px "Arial";
text-align: left;
margin: 35px;
}
header h1 {
position: relative;
color: white;
}
I see white section between images and I would like white section to be part of bottom image. Is there any ways to do this?
There are several approaches to get what you wanted.
Note: I just used two different random image samples from the internet for better illustration.
Margin with negative values:
First of all, you can try margin-top: some negative values; (in my example I just used -77px) and adding z-index: 1; to your upper image and also header h1 to ensure that it will always remain at top of the lower image. (There is no necessity for z-index in this approach.)
header {
position: relative;
height: 300px;
overflow: hidden;
}
.header__bg {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url("https://www.cranfield.ac.uk/~/media/images-for-new-website/rio/ktp/clear-water-drops-pexels-400x400.ashx?h=400&w=400&la=en&hash=18C2E8C4D228436DBA9414C59FBDFF01268A6681");
background-repeat: no-repeat;
transform: skewY(-6deg);
transform-origin: top left;
z-index: 1;
}
section.main_image {
background-image: url("https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/a704f043-a0fb-4652-b8ee-6bc362dae5a9/d5j1z44-0c21f546-39eb-48f9-8230-0b4500c7b88f.jpg?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcL2E3MDRmMDQzLWEwZmItNDY1Mi1iOGVlLTZiYzM2MmRhZTVhOVwvZDVqMXo0NC0wYzIxZjU0Ni0zOWViLTQ4ZjktODIzMC0wYjQ1MDBjN2I4OGYuanBnIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.O_Xy26vERxse28DI8z2gwy-z0M9aBlGMXJSOwbi8_nM");
background-repeat: no-repeat;
margin-top: -77px;
}
h1 {
margin: 0;
padding: 100px 0;
font: 44px "Arial";
text-align: left;
margin: 35px;
}
header h1 {
position: relative;
color: white;
z-index: 1;
}
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" href="HTMLPage2.css">
<meta charset="utf-8" />
<title></title>
</head>
<body>
<header>
<div class="header__bg"></div>
<h1>test</h1>
</header>
<section class="main_image">
<h1>Section Content</h1>
</section>
</body>
</html>
Transform with translateY:
Like the last one, you can add transform: translateY(some negative value); to your lower image to pull it up and z-index: 1; to your higher image. (z-index is necessary for this approach).
header {
position: relative;
height: 300px;
overflow: hidden;
}
.header__bg {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url("https://www.cranfield.ac.uk/~/media/images-for-new-website/rio/ktp/clear-water-drops-pexels-400x400.ashx?h=400&w=400&la=en&hash=18C2E8C4D228436DBA9414C59FBDFF01268A6681");
background-repeat: no-repeat;
transform: skewY(-6deg);
transform-origin: top left;
z-index: 1;
}
section.main_image {
background-image: url("https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/a704f043-a0fb-4652-b8ee-6bc362dae5a9/d5j1z44-0c21f546-39eb-48f9-8230-0b4500c7b88f.jpg?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcL2E3MDRmMDQzLWEwZmItNDY1Mi1iOGVlLTZiYzM2MmRhZTVhOVwvZDVqMXo0NC0wYzIxZjU0Ni0zOWViLTQ4ZjktODIzMC0wYjQ1MDBjN2I4OGYuanBnIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.O_Xy26vERxse28DI8z2gwy-z0M9aBlGMXJSOwbi8_nM");
background-repeat: no-repeat;
transform: translateY(-77px)
}
h1 {
margin: 0;
padding: 100px 0;
font: 44px "Arial";
text-align: left;
margin: 35px;
}
header h1 {
position: relative;
color: white;
z-index: 1;
}
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" href="HTMLPage2.css">
<meta charset="utf-8" />
<title></title>
</head>
<body>
<header>
<div class="header__bg"></div>
<h1>test</h1>
</header>
<section class="main_image">
<h1>Section Content</h1>
</section>
</body>
</html>
Giving transform skew to both images:
The last two approaches got a little con where the upper dimension of the lower image get behind the higher image to avoid that we can go into another approach, it is not so clean and tidy but it will do the work for us. For this cause, I modified your code a bit and you can see the results in the code snippet below:
body > div {
height: 560px;
}
body > div,
header,
section {
position: relative;
overflow: hidden;
}
header,
section {
height: 300px;
}
.header__bg,
.main_image {
position: absolute;
width: 100%;
background-repeat: no-repeat;
transform: skewY(-6deg);
transform-origin: top left;
}
.header__bg {
top: 0;
bottom: 0;
right: 0;
left: 0;
background-image: url("https://www.cranfield.ac.uk/~/media/images-for-new-website/rio/ktp/clear-water-drops-pexels-400x400.ashx?h=400&w=400&la=en&hash=18C2E8C4D228436DBA9414C59FBDFF01268A6681");
z-index: 1;
}
section.main_image {
background-image: url("https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/a704f043-a0fb-4652-b8ee-6bc362dae5a9/d5j1z44-0c21f546-39eb-48f9-8230-0b4500c7b88f.jpg?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcL2E3MDRmMDQzLWEwZmItNDY1Mi1iOGVlLTZiYzM2MmRhZTVhOVwvZDVqMXo0NC0wYzIxZjU0Ni0zOWViLTQ4ZjktODIzMC0wYjQ1MDBjN2I4OGYuanBnIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.O_Xy26vERxse28DI8z2gwy-z0M9aBlGMXJSOwbi8_nM");
}
h1 {
margin: 0;
padding: 100px 0;
font: 44px "Arial";
text-align: left;
margin: 35px;
z-index: 1;
}
header h1 {
position: relative;
color: white;
}
section > h1 {
transform: skewY(6deg);
}
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" href="HTMLPage2.css">
<meta charset="utf-8" />
<title></title>
</head>
<body>
<div>
<header>
<div class="header__bg"></div>
<h1>test</h1>
</header>
<section class="main_image">
<h1>Section Content</h1>
</section>
</div>
</body>
</html>
This question already has answers here:
How to center a "position: absolute" element
(31 answers)
Closed 4 years ago.
I am trying to position my button in the center left:50% top:50% but it ends up more than 50%. its a video background i am trying to do with overlay. i have the video tag in a is set to position: absolute; other text are position fine until when it comes to the button. i am thinking it's probably the way i position the video background but i'm not sure.i could really use some help on this thanks.
CSS
/*----Global----*/
}
* {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
html,body {
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
.fullscreen-video-wrap{
position: relative;
top: 0;
left: 0;
width: 100%;
height: 100vh;
overflow: hidden;
opacity: 0.5;
}
.travel{
position: absolute;
top: 10px;
left: 16px;
z-index: -1;
font-size:18px;
font-family: Raleway;
}
.blue{
color: rgb(0, 119, 255);
}
.motto{
position: absolute;
top: 27px;
left: 16px;
z-index: -1;
font-size:14px;
font-family: Abril Fatface;
}
.destination{
position: absolute;
text-align: center;
top: 50%;
left: 0;
width: 100%;
z-index: -1;
font-family: Raleway;
font-size: 18px;
}
.quotes{
position: absolute;
text-align: center;
top:55%;
left: 0
width:100%;
z-index: -1;
font-family:Raleway;
font-size: 14px;
}
.button{
position: absolute;
text-align: center;
top: 60%;
left: 50%;
z-index: -1;
}
HTML
<!DOCTYPE html>
<html>
<head>
<title>Traveling.com</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="New.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<style>
#import url('https://fonts.googleapis.com/css?family=Raleway');
#import url('https://fonts.googleapis.com/css?family=Abril+Fatface');
</style>
<body>
<div class="fullscreen-video-wrap">
<video autoplay muted loop >
<source src="videos/sunrise_01.mp4" type="video/mp4">
</video>
</div>
<div class="header-content"></div>
<h1 class="travel">Traveling<span class="blue">.com</span></h1>
<p class="motto"><i>Travel <span class="blue">Beautifully</span></i></p>
<h4 class="destination">Find your destination</h4>
<p class="quotes">“A lie can travel half way around the world while the truth is putting on its shoes.”
― Mark Twain</p>
<button class="button">Sign up</button>
</body>
</html>
You can use a transform to translate the element -50%, this should work
.button{
position: absolute;
text-align: center;
top: 60%;
left: 50%;
transform: translateX(-50%); /*Added*/
z-index: -1;
}
Let me know if that help!
Edit
When you give to an element with position: absolute; a left: 50% it's never gonna be centered really, it will push him to the 50% of the father element, look at this picture
What I did adding transform: translateX(-50%); is move the element over itself -50%
Hope this helps you to understand, here you can find more information about translateX() function, and you can read about the transform property too.