CODEWITHSUNDEEP
htmlcsscss-transitionstransition
ruben005
ruben005

Reputation: 129

How to Make Transition Left Only with CSS

Hello I have a search arrow on my website and right it transitions on both left and right. Because the arrow is on the right side of my website I want it to only transition left only.

In other words I want the search icon to stay in place and not move and input to transition to the left only so you can type in the input. I hope this makes sense.

body {
  background: darkgrey;
}

.search-box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #2f3640;
  height: 40px;
  border-radius: 40px;
  padding: 10px;
}

.search-box:hover>.search-txt {
  width: 240px;
  padding: 0 6px;
}

.search-box:hover>.search-btn {
  background: white;
}

.search-btn {
  /*   position: absolute; */
  color: lightblue;
  float: right;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #2f3640;
  display: flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  transition: 0.4s;
}

.search-txt {
  border: none;
  background: none;
  outline: none;
  float: left;
  padding: 0;
  color: white;
  font-size: 16px;
  transition: 0.4s;
  line-height: 40px;
  width: 0px;
}
<head>
  <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous" />
</head>

<div class="search-box">
  <input class="search-txt" type="text" name="" placeholder="Type to Search">
  <a class="search-btn" href="#">
    <i class="fas fa-search"></i>
  </a>
</div>

Upvotes: 0

Views: 71

Answers (2)

Shraddha
Shraddha

Reputation: 894

You only need to change few properties as below:

.search-box {
  position: absolute;
  top:50%; 
  right:50%;
  transform: translate(0, -50%);
  background: #2f3640;
  height: 40px;
  border-radius: 40px;
  padding: 10px;
}

Please, find the complete code below. Hope it helps. 

body {
  background: darkgrey;
}

.search-box {
  position: absolute;
  top:50%; 
  right:50%;
  transform: translate(0, -50%);
  background: #2f3640;
  height: 40px;
  border-radius: 40px;
  padding: 10px;
}

.search-box:hover>.search-txt {
  width: 240px;
  padding: 0 6px;
}

.search-box:hover>.search-btn {
  background: white;
}

.search-btn {
  /*   position: absolute; */
  color: lightblue;
  float: right;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #2f3640;
  display: flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  transition: 0.4s;
}

.search-txt {
  border: none;
  background: none;
  outline: none;
  float: left;
  padding: 0;
  color: white;
  font-size: 16px;
  transition: 0.4s;
  line-height: 40px;
  width: 0px;
}
<head>
  <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous" />
</head>

<div class="search-box">
  <input class="search-txt" type="text" name="" placeholder="Type to Search">
  <a class="search-btn" href="#">
    <i class="fas fa-search"></i>
  </a>
</div>

Upvotes: 1

Atul Rajput
Atul Rajput

Reputation: 4178

Just add some focus and valid check in your css. and if you only want the input to slide left from where it is, just let me know, I will change the code

body {
  background: darkgrey;
}

.search-box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #2f3640;
  height: 40px;
  border-radius: 40px;
  padding: 10px;
}

.search-box:hover>.search-txt , .search-txt:focus, .search-txt:valid {
  width: 240px;
  padding: 0 6px 0 50px;
}

.search-box:hover>.search-btn {
  background: white;
}

.search-btn {
  position: absolute;
  color: lightblue;
  left: 10px;
  float: right;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #2f3640;
  display: flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  transition: 0.4s;
}

.search-txt {
  border: none;
  background: none;
  outline: none;
  float: left;
  padding: 0;
  color: white;
  font-size: 16px;
  transition: 0.4s;
  line-height: 40px;
  width: 40px;
}
<head>
  <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous" />
</head>

<div class="search-box">
  <input class="search-txt" type="text" name="" placeholder="Type to Search" required>
  <a class="search-btn" href="#">
    <i class="fas fa-search"></i>
  </a>
</div>

Upvotes: 0

Related Questions