18041 sujets

Questions générales et questions de débutants

Faire un "bloc survolé"

Bonjour à tous,

En me promenant sur le site du monde, j'ai vu un effet intéressant dans leur rubrique "a ne pas manquer"; des blocs qui on un effet de survol.

Désirant avoir la même chose sur mon site, j'ai voulu me mettre en tête de faire ces même blocs, mais je galère beaucoup. Quelqu'un pourrait m'aider svp ?

Merci d'avance !

voici mon code


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Document sans nom</title>
<style type="text/css">
img {
border:none;
}
.bloc {
height:200px;
width:188px;
border:1px solid grey;
}

.bloc-haut {
height:200px;
width:188px;
float:left;
}

.bloc-bas {
height:200px;
width:188px;
visibility:hidden;
display:none;
float:left;
}

.bloc-haut:hover {
display:none;
}

.bloc-bas:hover {
position:absolute;
top:0px;
visibility:visible;
}

</style>
</head>

<body>
<div class="bloc">
    <div class="bloc-haut">
        <img src="http://www.clubaventure.fr/images/trekkeur/namibie_0509/namibie_girafes_etosha_1_01_d_rey.jpg"/>
        <p>Fascinant Damaraland</p>
    </div>
    <div class="bloc-bas">
        <p>Extrêmement sauvage, le Damaraland a des airs de bout du monde. Les plateaux tabulaires ocres qui dominent la plaine sont truffés de grottes et d'abris rocheux tapissés de nombreuses peintures</p>
    </div>    
</div>
</body>
</html>
Je crois avoir un début de solution:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Document sans nom</title>
<style type="text/css">
img {
border:none;
}
.bloc {
height:200px;
width:188px;
border:1px solid grey;
overflow:hidden;
margin:0;
padding:0;
}

.bloc-haut {
height:200px;
width:188px;
}

.bloc-haut p {
margin:0;
padding:10px;
color:#990000;
font-weight:bold;
font-size:13px;

}

.bloc-bas {
height:200px;
width:188px;
float:left;
}

.bloc-bas p {
padding:0px 5px 10px 5px;
color:#fff;
font-weight:bold;
font-size:15px;
}

.bloc-haut:hover {
bottom:0;
display:none;
visibility:hidden;
}

.bloc-bas:hover {
background:#990000;
position:absolute;
top:9px;
}

</style>
</head>

<body>
<div class="bloc">
    <div class="bloc-haut">
        <img src="http://www.clubaventure.fr/images/trekkeur/namibie_0509/namibie_girafes_etosha_1_01_d_rey.jpg"/>
        <p>Fascinant Damaraland</p>
    </div>
    <div class="bloc-bas">
        <p>Extrêmement sauvage, le Damaraland a des airs de bout du monde. Les plateaux tabulaires ocres qui dominent la plaine sont truffés de grottes et d'abris rocheux tapissés de nombreuses peintures</p>
    </div>    
</div>
</body>
</html>


En fait c'est l'overflow que je gérais mal apparemment...
Bien, après m'être un peu prit la tête, voila ce que cela donne. Le seul hic, c'est que le survol ne fonctionne pas sous IE6, safari et chrome...

Vous auriez une idée d'où vient le problème ???

Merci beaucoup !!!


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Document sans nom</title>
<style>
.bloc a {
	color:#000;
}
.bloc {
height:200px;
width:175px;
overflow:hidden;
margin:10px;
padding:0;
float:left;
position:relative;
background:#FFCD59;
color:#000;
cursor:pointer;
}

.bloc-haut {
height:200px;
width:175px;
z-index:1;
}

.bloc-haut p {
margin:0;
text-align:center;
font-weight:bold;
font-size:13px;

}

.bloc-bas {
height:200px;
width:175px;
float:left;
z-index:1000;
}

div#centre.options-offertes h3 {
margin:10px;
padding:0;
font-size:15px;
font-variant:small-caps;
color:#000;
}

.bloc-bas p {
padding:0px 5px 10px 5px;
font-size:12px;
}

.bloc-haut:hover {
bottom:0;
display:none;
visibility:hidden;
}

.bloc-bas:hover {
background:#FFCD59;
position:absolute;
top:0;
}
</style>
</head>

<body>
<!-- DEBUT BLOC -->
<div class="bloc">
    <a href="#" title="#">
    <div class="bloc-haut">
        <img src="http://www.clubaventure.fr/images/trekkeur/namibie_0509/namibie_girafes_etosha_1_01_d_rey.jpg" alt=""/>
        <p>Paragraphe d'introduction</p>
    </div>
    <div class="bloc-bas">
        <h3>Titre du texte de prsentation</h3>
        <p>
        	Lorem ipsum et blablabla...
        </p>
    </div>   
    </a> 
</div>
<!-- /FIN BLOC --> 
</body>
</html>
Sujet clos
Aller à