Skip to content

Instantly share code, notes, and snippets.

@joalbertg

joalbertg/index.html

Created May 7, 2017 03:16
Show Gist options
  • Save joalbertg/e21938cb87dd130b5cce33460be5b1ba to your computer and use it in GitHub Desktop.
Save joalbertg/e21938cb87dd130b5cce33460be5b1ba to your computer and use it in GitHub Desktop.
Download ZIP
Barra de imagenes con flex y transform
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Transform</title>
<link rel="stylesheet" type="text/css" href="css/styles.css">
</head>
<body>
<div class="container">
<div class="skew"><img src="http://lorempixel.com/500/250"></div>
<div class="skew"><p>2</p></div>
<div class="skew"><img src="http://lorempixel.com/500/250"></div>
<div class="skew"><p>4</p></div>
<div class="skew"><img src="http://lorempixel.com/500/250"></div>
</div>
</body>
</html>
Raw
styles.css
*{
box-sizing: border-box;
}
body{
margin: 0;
}
.container{
display: flex;
overflow: hidden;
background-color: pink;
}
.skew{
flex: 1;
width: 100px;
height: 250px;
background-color: tomato;
transform: skew(-20deg);
border-right: 6px solid #fff;
transition: all .4s;
overflow: hidden;
}
.skew p{
transform: skew(20deg);
text-align: center;
line-height: 250px;
}
.skew img{
transform: skew(20deg);
position: relative;
left: -50px
}
.skew:hover{
flex-grow: 3;
}
.skew:first-child{
border-left: 6px solid #fff;
}
.skew:nth-child(even){
background-color: pink;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment