k/website
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

artical explode with prevue

Browse Source
This commit is contained in:
k 2024-05-24 22:24:56 -04:00
parent ea28ecb36e
commit 60b4594e9d
2 changed files with 38 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
css/shared.css
View File

@ -19,10 +19,18 @@ body {
.artical{ .artical{
width: min(100vw, 55em); width: min(calc(100vw - 4em), 55em);
margin:auto; margin:auto;
text-align: center; margin-top: 2em;
padding: 0px; height: 25em;
overflow: hidden;
transition-duration: 1.5s;
}
.artical:hover{
width:calc(100% - 8em);
height:calc(100vh - 6em);
overflow: scroll;
} }
.artical h1 { .artical h1 {
@ -36,6 +44,18 @@ body {
height: 0.3em; height: 0.3em;
} }
.artical:hover .preview{
display:none;
}
.content{
display:none;
}
.artical:hover .content{
display:block;
}
.glass{ .glass{
background: rgba(128, 128, 128, 0.35); background: rgba(128, 128, 128, 0.35);
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);

14
index.html
View File

@ -1,14 +1,18 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head>
<head>
<link rel="stylesheet" href="css/shared.css"> <link rel="stylesheet" href="css/shared.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head> </head>
<body>
<body>
<div class="glass artical"> <div class="glass artical">
<h1>hi</h1> <h1>hi</h1>
<hr> <hr>
<p>obama killed my wife</p> <p class="preview">shit</p>
<p class="content">fuck</p>
</div> </div>
</body> </body>
</html> </html>