Slide-Text-Suchfeld wird überschrieben

Question

Ich mache ein Suchfeld Folie. Was ich brauche ist, dass, wenn Sie auf die Lupe klicken, verschieben Sie die Folie die "Castilian", Text und dass es nicht festen Text und Särche siehe Kasten unten. Es ist möglich? das ist das Beste, was ich tun könnte ...

My code

Answer 1

dieses CSS versuchen. Das hat funktioniert.

#wrap { 
    margin: 39px 60px; 
    display: inline-block; 
    position: relative; 
    /*float: right;*/ 
    padding: 0; 
    position: relative; 
} 

input[type="text"] { 
    height: 60px; 
    font-size: 55px; 
    display: inline-block; 
    font-family: "Lato"; 
    font-weight: 100; 
    border: none; 
    outline: none; 
    color: #555; 
    padding: 3px; 
    padding-right: 60px; 
    width: 0px; 
    position: relative; 
    top: 0; 
    right: 0; 
    background: none; 
    z-index: 3; 
    transition: width .4s cubic-bezier(0.000, 0.795, 0.000, 1.000); 
    cursor: pointer; 
} 

input[type="text"]:focus:hover { 
    border-bottom: 1px solid #BBB; 
} 

input[type="text"]:focus form { 
    width: 700px; 
} 

input[type="text"]:focus { 
    width: 700px; 
    z-index: 1; 
    border-bottom: 1px solid #BBB; 
    cursor: text; 
} 
input[type="submit"] { 
    height: 67px; 
    width: 63px; 
    display: inline-block; 
    color:red; 
    /*float: right;*/ 
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAMAAABg3Am1AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAADNQTFRFU1NT9fX1lJSUXl5e1dXVfn5+c3Nz6urqv7+/tLS0iYmJqampn5+fysrK39/faWlp////Vi4ZywAAABF0Uk5T/////////////////////wAlrZliAAABLklEQVR42rSWWRbDIAhFHeOUtN3/ags1zaA4cHrKZ8JFRHwoXkwTvwGP1Qo0bYObAPwiLmbNAHBWFBZlD9j0JxflDViIObNHG/Do8PRHTJk0TezAhv7qloK0JJEBh+F8+U/hopIELOWfiZUCDOZD1RADOQKA75oq4cvVkcT+OdHnqqpQCITWAjnWVgGQUWz12lJuGwGoaWgBKzRVBcCypgUkOAoWgBX/L0CmxN40u6xwcIJ1cOzWYDffp3axsQOyvdkXiH9FKRFwPRHYZUaXMgPLeiW7QhbDRciyLXJaKheCuLbiVoqx1DVRyH26yb0hsuoOFEPsoz+BVE0MRlZNjGZcRQyHYkmMp2hBTIzdkzCTc/pLqOnBrk7/yZdAOq/q5NPBH1f7x7fGP4C3AAMAQrhzX9zhcGsAAAAASUVORK5CYII=) center center no-repeat; 
    text-indent: -10000px; 
    border: none; 
    position: absolute; 
    top: 0; 
    right: 0; 
    z-index: 2; 
    cursor: pointer; 
    opacity: 0.4; 
    cursor: pointer; 
    transition: opacity .4s ease; 
} 

input[type="submit"]:hover { 
    opacity: 0.8; 
}