changer un input au survol d'une image

dorian37271
Les bases HTML/CSS

bonjour, j'aimerais savoir comment faire apparaitre mon input en survolant une image.
voila le code que j'ai tenté :

html:

<form action="" method="POST">

                    <input type="text" name="search" class="search" placeholder="rechercher dans le site">

                    <input class="ss" style="display:none" type="submit" name="submit">

                    <img src="images/icone_search.png" class="bs">

</form>

css: 

.bs {
width:45px;
background-color:white;
padding:5px;
border-radius:5px;
transition:all 0.5s;
}

.bs:hover {

background-color:#DDDDDD;
transition:all 0.5s;

}
.bs:hover .search {
display:block;
width:221px;
transition: width 0.70s;
}

.search {
display:none;
width:0px;
transition: width 0.70s;

}

malheureusement sa ne marche pas et je ne suis pas sur expert du css.

6 réponses

Glaived
Réponse acceptée 
<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="utf-8">
    <style>
    form input.search{
        display: none;
    }
    form img:hover + .search{
        display: inline-block;
    }
</style>
</head>
<body>
    <form action="" method="POST">
        <img src="http://lorempicsum.com/up/255/200/2" class="bs">
        <input type="text" name="search" class="search" placeholder="rechercher dans le site">
        <input class="ss" style="display:none" type="submit" name="submit">
    </form>
</body>
</html>

ça marche, mais dans le corp html, c'est d'abord l'img, PUIS les input le sélecteur + c'est après, et non avant. Après suffirais de jouer avec les float pour inverser le sens

Soundboy39

A essayer :

img.bs:hover ~ input.ss { display:block; }
dorian37271
Auteur

je vais éssayer par contre l'input submit doit rester en display none

dorian37271
Auteur

ne marche pas

dorian37271
Auteur 
.bs {

width:45px;
background-color:white;
padding:5px;
border-radius:5px;
transition:all 0.5s;

}

.bs:hover {

background-color:#DDDDDD;
transition:all 0.5s;

}

img.bs:hover ~ input.search {

display:block;
width:221px;
transition: width 0.70s;

}

.search {

display:none;
width:0px;
transition: width 0.70s;

}
dorian37271
Auteur

merci baucoup pour vos reponses