#= ID
.=Classe
→ Pour la classe grand format
Display non
visibility hidden
li display inline-block
li:hover.grandformat → pour survoler l'image, position
visibility
position relative → body (TD9) il fait agrandir l'image qu'on survole et que les autres
soient plus (+) petites : li img
→ li composé donc :
#image li:hover ex :
with 375
Les images deviennent plus petites :
#image hover li ex :
width 93 + padding 0 (juste le dernier)
Révisions
overflow (visible, hidden) → auto = ascenseur
Positions → Fixed, relative (l'emplacement ne bouge pas,
parent), absolue (par rapport à la boite parent)
Au début : *
html (couleur) balise
body (image) balise
dièse = ID et • = classe
Comment utiliser float?
Comment utiliser hover?
Nouveau sélecteur composé;
nom du balise:hover,{
background-color: yellow;
background-color: yellow;
}
Code de base;
Hover de base pour faire apparaitre des images caché
Comment agrandir une seule image en utilisant hover à partir d'un ID qui englobe les images?
Code de base;
</head><body>
<ul id="album">
<li>
<ul>
<li><img src="images/portrait1a.jpg" alt="" title=""></li>
<li><img src="images/portrait2a.jpg" alt="" title=""></li>
<li><img src="images/portrait3a.jpg" alt="" title=""></li>
</ul>
</li>
</body></html>
Code de CSS;
#album {
list-style: none;
position: relative;
text-align: center;
}
#album ul li
{
width: 112px;
height: 87px;
display: inline-block;
}
#album
img{
width: 100px;
padding: 5px;
border: 1px solid #000;
background-color: #FFF;
vertical-align: top;
}
#album ul
{
position: absolute;
top: 20px;
list-style: none;
text-align: center;
left: 0px;
}
#album > li{
width: 100px;
display: inline-block;
background-color: #999;
padding: 2px 10px;
}
#album li:hover ul{
z-index: 10;
}
#album>li:hover {
color: #FFF;
background-color: #AAA;
}
#album img:hover {
width: 200px;
position: relative;
z-index: 2;
left: -50px;
top: -37.5px;
}
Comment utiliser hover pour agrandir une image à partir d'un classe appliqué seulement à l'image?
CODE HTML<div class="grand">
<p>
<img src="image1.jpg" alt=""/>
</p>
</div>
CODE CSS
.grand {
height:400px;
}
.grand p {
text-align:center;
}
.grand img {
width:200px;
height:267px;
}
.grand img:hover {
width:300px;
height:400px;
}
