28172 sujets
CSS et mise en forme, CSS3
Pour répondre a votre requête sans utiliser d'animation:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>3 colonnes fluides</title>
<style>
*{
margin:0;
padding:0;
}
body {
margin:100px;
}
section{
position:relative
}
.cadre{
border:25px solid red;
width:150px;
height:150px;
position:relative;
//z-index:2;
}
.cadre:after{
content: "";
width:200px;
height:25px;
background-color: red;
position: absolute;
bottom:-25px;
left:-25px;
z-index:2;
}
.cadre:before{
content: "";
width: 200px;
height: 25px;
background-color: red;
position: absolute;
top: -25px;
left: -25px;
z-index: 2;
}
.exemple{
width:150px;
height:175px;
background-image:url(http://fakeimg.pl/150x175/ccc/);
position:absolute;
top:25px;
left:25px;
margin-bottom:25px;
}
.exemple:hover{
top:0px;
}
</style>
</head>
<body>
<section>
<div class="cadre"></div>
<div class="exemple">
</div>
</section>
</body>
</html>
