Skip to content

Instantly share code, notes, and snippets.

@AlanSimpsonMe

AlanSimpsonMe/Casually_Tossed_Photos

Last active September 2, 2022 12:33
Show Gist options
  • Save AlanSimpsonMe/509f1a159b80d0a75656ca26ecfd18a6 to your computer and use it in GitHub Desktop.
Save AlanSimpsonMe/509f1a159b80d0a75656ca26ecfd18a6 to your computer and use it in GitHub Desktop.
Download ZIP
Photos casually tossed on a table - HTML5 and CSS3
Raw
Casually_Tossed_Photos
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="description" content="Photos casually tossed on a table - HTML5 and CSS3">
<meta name="author" content="Alan Simpson">
<title>Casually Tossed Photos</title>
<style>
/* Photos container */
.photos {
margin: 3em;
width: 100%;
height: 800px;
position: relative;
background-image: url(bkg.jpg);
}
/* All photos */
.photos img {
position: absolute;
top: 60px;
left: 40%;
width: 320px;
border: solid 20px white;
border-bottom-width: 60px;
box-shadow: 0 0 1px 1px rgba(0, 0, 0, .5);
z-index: 10;
}
/* Each image tilted and potioned, */
#img1 {
top: 120px;
left: 20%;
transform: rotate(-15deg);
}
/* Middle image */
#img2 {
top: 70px;
left: 30%;
transform: rotate(10deg);
}
/* Bottom image */
#img3 {
top: 100px;
left: 45%;
transform: rotate(-35deg);
}
/* Straighten and magnify on hover */
#img1:hover,
#img2:hover,
#img3:hover{
top:180px;
z-index: 20;
transform: rotate(0deg) scale(1.5);
transition: 250ms;
}
</style>
</head>
<body>
<div class="photos">
<img src="img1.jpg" id="img3" alt="sample">
<img src="img2.jpg" id="img2" alt="sample">
<img src="img3.jpg" id="img1" alt="sample">
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment