CODEWITHSUNDEEP
javascripthtmlcsscss-animationscss-transitions
AtiqGauri
AtiqGauri

Reputation: 1615

Problem moving image with search bar animation

I have a search bar when focused moves up with an animation
I want the same with image placed on top of the search bar...
so that when we click on search bar image gets smaller and move in top left corner and search bar moves up in sync animation.

right now i have managed to move search bar but stuck at image part...
I am trying to detect focus with JS and then make transition for image too but margin-left and margin bottom is not working...

Can anyone help to complete it? please

var input = document.getElementById("SearchBar");
var homeImage = document.getElementById("homeImage");
input.addEventListener("focus", function () {
    homeImage.classList.add('horizTranslate');
});
#SearchBar {
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    
    width: 40%;
    box-sizing: border-box;
    border: 3px solid;
    border-radius: 4px;
    font-size: 16px;
    background-color: white;
    background-image: url('search-icon.svg');
    background-position: 10px 10px; 
    background-repeat: no-repeat;
    border-color: #ffaf7b;
    padding: 12px 20px 12px 40px;
    transition: width 0.8s ease, top 0.5s ease, border-color 0.5s ease;
}

#homeImage {
    position: absolute;
    top: 28%;
    left: 45%;
}

#SearchBar:focus {
    width: 90%;
    top: 22%;
    border-color: #ff512f;
}


.horizTranslate {
    transition: 3s;
    margin-right: 50%;
}
<!DOCTYPE html>
<html>
  <head>
  <meta charset="UTF-8">
	<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
  <meta name="HandheldFriendly" content="true">
  <link rel="stylesheet" type="text/css" href="style.css">
  </head>
  <body>
    <input id="SearchBar" placeholder="XXXXX...">
    <img src="https://via.placeholder.com/150" src="pattern-img.png" alt="Girl in a jacket" id="homeImage"><script src="ui.js" type="text/javascript"></script>
  </body>
</html>

here is codepen

Upvotes: 0

Views: 143

Answers (1)

Matan Sanbira
Matan Sanbira

Reputation: 1513

with no javascript

CSS:

#SearchBar {
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  width: 40%;
  box-sizing: border-box;
  border: 3px solid;
  border-radius: 4px;
  font-size: 16px;
  background-color: white;
  background-image: url("search-icon.svg");
  background-position: 10px 10px;
  background-repeat: no-repeat;
  border-color: #ffaf7b;
  padding: 12px 20px 12px 40px;
  transition: width 0.8s ease, top 0.5s ease, border-color 0.5s ease;
}

#homeImage {
  position: absolute;
  top: 28%;
  left: 45%;
  transition: 1s;
}

#SearchBar:focus {
  width: 90%;
  top: 22%;
  border-color: #ff512f;
  transition: 1s;
  margin-right: 50%;
}

#SearchBar:focus+#homeImage {
  top: 0;
  left: 80%;
  transition: 1s;
}

Upvotes: 1

Related Questions