Skip to content

Instantly share code, notes, and snippets.

@mfrancois3k

mfrancois3k/css

Created April 7, 2023 04:55
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save mfrancois3k/b5b19e5fa1c2fe97b6f4d709926caa89 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save mfrancois3k/b5b19e5fa1c2fe97b6f4d709926caa89 to your computer and use it in GitHub Desktop.
Download ZIP
untitled #awwwards #CSS #effects
Raw
css
.hero {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
min-height: 80vh;
padding-top: 4em;
padding-bottom: 4em;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
}
.hero_text {
padding-top: 0.2em;
font-size: 21vw;
line-height: 0.8;
text-align: center;
letter-spacing: -0.01em;
}
.footer {
height: 50vh;
}
.team_header {
position: relative;
z-index: 10;
padding: 1em;
}
.styles {
position: fixed;
left: 0%;
top: 0%;
right: auto;
bottom: auto;
}
.team_item {
position: relative;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
padding: 1em;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
border-bottom: 1px solid #fff;
-webkit-transition: color 200ms ease;
transition: color 200ms ease;
color: #fff;
}
.team_name {
width: 50%;
-webkit-box-ordinal-group: 2;
-webkit-order: 1;
-ms-flex-order: 1;
order: 1;
text-align: right;
}
.team_title {
width: 17%;
}
.team_visual {
position: fixed;
left: 0%;
top: 0%;
right: 0%;
bottom: 0%;
z-index: 2;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
width: 100%;
height: 100vh;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
}
.team_image {
width: 30%;
margin-left: 19%;
opacity: 0;
}
.team_image.is-hovered {
opacity: 1;
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
.team_bg {
position: absolute;
left: 0%;
top: 0%;
right: 0%;
bottom: auto;
z-index: -1;
width: 100%;
height: 0%;
background-color: #d3fd50;
-webkit-transition: height 200ms ease;
transition: height 200ms ease;
}
@media screen and (max-width: 991px) {
p {
margin-top: 0.4em;
margin-bottom: 0.2em;
font-size: 1.9em;
}
.team_item {
display: block;
padding: 0em;
border-bottom-width: 0px;
}
.team_name {
width: auto;
text-align: left;
}
.team_title {
width: auto;
}
.team_list {
display: -ms-grid;
display: grid;
padding: 1em;
grid-auto-columns: 1fr;
grid-column-gap: 1em;
grid-row-gap: 1.5em;
-ms-grid-columns: 1fr 1fr;
grid-template-columns: 1fr 1fr;
-ms-grid-rows: auto auto;
grid-template-rows: auto auto;
}
.team_visual {
position: relative;
height: auto;
}
.team_image {
width: 100%;
margin-left: 0%;
opacity: 1;
}
}
@media screen and (max-width: 767px) {
p {
font-size: 1.5em;
}
}
@media screen and (max-width: 479px) {
.team_list {
-ms-grid-columns: 100%;
grid-template-columns: 100%;
}
}
@font-face {
font-family: 'Lausanne';
src: url('https://assets.website-files.com/6419c5d9d88f8e2a12b04278/6419c5d9d88f8e166bb04290_Lausanne-300.woff2') format('woff2');
font-weight: 400;
font-style: normal;
font-display: swap;
}
Raw
css hover Awwards team reaveal cards
<body class="vsc-initialized" cz-shortcut-listen="true"><div class="styles w-embed"><style>
@media screen and (min-width: 992px) {
.team_visual {
pointer-events: none;
}
.team_item:hover {
color: black;
}
.team_item:hover .team_bg {
height: 100%;
}
.team_item:hover .team_image {
opacity: 1;
}
}
</style></div><div class="hero"><div class="hero_text">CSS<br>HOVER</div></div><div class="team_header"><p>OUR&nbsp;TEAM</p></div><div class="team_wrapper w-dyn-list"><div role="list" class="team_list w-dyn-items"><div role="listitem" class="team_item w-dyn-item"><div class="team_visual"><img src="https://assets.website-files.com/6419c5d9d88f8e4979b0427a/6419c5d9d88f8e04acb04281_62afa6f304fc527c8d53e2df_6279b449f18bf10f19507fd2_Simon-480x640.jpeg" loading="lazy" alt="" class="team_image"></div><p class="team_name">Simon Bedard</p><div class="team_title">Strategic Director</div><div class="team_bg"></div></div><div role="listitem" class="team_item w-dyn-item"><div class="team_visual"><img src="https://assets.website-files.com/6419c5d9d88f8e4979b0427a/6419c5d9d88f8e6765b04283_62afa6f304fc52745553e2dc_6279b449f18bf12e51507fcf_mel-480x640.jpeg" loading="lazy" alt="" class="team_image"></div><p class="team_name">Melanie Laviolette</p><div class="team_title">Art director / Design</div><div class="team_bg"></div></div><div role="listitem" class="team_item w-dyn-item"><div class="team_visual"><img src="https://assets.website-files.com/6419c5d9d88f8e4979b0427a/6419c5d9d88f8e09ffb0427c_62afa6f304fc52fbbf53e2e1_6279b449f18bf1e83b507fd3_Tomy2-480x640.jpeg" loading="lazy" alt="" class="team_image"></div><p class="team_name">Tomy Asselin-Lapointe</p><div class="team_title">Coordinator</div><div class="team_bg"></div></div><div role="listitem" class="team_item w-dyn-item"><div class="team_visual"><img src="https://assets.website-files.com/6419c5d9d88f8e4979b0427a/6419c5d9d88f8ee78db04282_62afa6f304fc5273c453e2dd_6279b449f18bf1484a507fd0_Seb-480x640.jpeg" loading="lazy" alt="" class="team_image"></div><p class="team_name">Sebastien Moise</p><div class="team_title">General Manager</div><div class="team_bg"></div></div><div role="listitem" class="team_item w-dyn-item"><div class="team_visual"><img src="https://assets.website-files.com/6419c5d9d88f8e4979b0427a/6419c5d9d88f8e2cedb0427e_62afa6f304fc521a9753e2e0_6279b449f18bf17da2507fd1_SebR-480x640.jpeg" loading="lazy" alt="" class="team_image"></div><p class="team_name">Sebastien Roy</p><div class="team_title">Creative Lead</div><div class="team_bg"></div></div><div role="listitem" class="team_item w-dyn-item"><div class="team_visual"><img src="https://assets.website-files.com/6419c5d9d88f8e4979b0427a/6419c5d9d88f8e99fcb04287_62afa6f304fc52153b53e2de_6279b449f18bf12a13507fce_Margaux-480x640.jpeg" loading="lazy" alt="" class="team_image"></div><p class="team_name">Margaux Pietri</p><div class="team_title">Account Director</div><div class="team_bg"></div></div><div role="listitem" class="team_item w-dyn-item"><div class="team_visual"><img src="https://assets.website-files.com/6419c5d9d88f8e4979b0427a/6419c5d9d88f8e642eb0427d_62afa6f304fc529e1853e2d8_6279b449f18bf1e874507fca_Charlotte-480x640.jpeg" loading="lazy" alt="" class="team_image"></div><p class="team_name">Charlotte Barriere</p><div class="team_title">Copywriter</div><div class="team_bg"></div></div><div role="listitem" class="team_item w-dyn-item"><div class="team_visual"><img src="https://assets.website-files.com/6419c5d9d88f8e4979b0427a/6419c5d9d88f8e5fbdb04285_62afa6f304fc52288253e2db_6279b449f18bf1b9d0507fcd_Judith-480x640.jpeg" loading="lazy" alt="" class="team_image"></div><p class="team_name">Judith Marois Jones</p><div class="team_title">Account Director</div><div class="team_bg"></div></div><div role="listitem" class="team_item w-dyn-item"><div class="team_visual"><img src="https://assets.website-files.com/6419c5d9d88f8e4979b0427a/6419c5d9d88f8ea731b0427f_62afa6f304fc5202ae53e2da_6279b449f18bf1c902507fcb_hugo-480x640.jpeg" loading="lazy" alt="" class="team_image"></div><p class="team_name">Hugo Joseph</p><div class="team_title">Art Director / Design</div><div class="team_bg"></div></div><div role="listitem" class="team_item w-dyn-item"><div class="team_visual"><img src="https://assets.website-files.com/6419c5d9d88f8e4979b0427a/6419c5d9d88f8e3aabb04280_62afa6f304fc52051953e2d7_6279b449f18bf1f19d507fc8_Caro-480x640.jpeg" loading="lazy" alt="" class="team_image"></div><p class="team_name">Caroline Lavado</p><div class="team_title">Account Manager</div><div class="team_bg"></div></div><div role="listitem" class="team_item w-dyn-item"><div class="team_visual"><img src="https://assets.website-files.com/6419c5d9d88f8e4979b0427a/6419c5d9d88f8e6030b04284_62afa6f304fc52220d53e2d9_6279b449f18bf199cc507fc9_Chantal-480x640.jpeg" loading="lazy" alt="" class="team_image"></div><p class="team_name">Chantal Gobeil</p><div class="team_title">Creative Director</div><div class="team_bg"></div></div><div role="listitem" class="team_item w-dyn-item"><div class="team_visual"><img src="https://assets.website-files.com/6419c5d9d88f8e4979b0427a/6419c5d9d88f8e4d7eb04286_62afa6f304fc529abe53e2d6_6279b449f18bf1201e507fc7_alexia-480x640.jpeg" loading="lazy" alt="" class="team_image"></div><p class="team_name">Alexia Rancourt</p><div class="team_title">Strategic Planner</div><div class="team_bg"></div></div></div></div><div class="footer"></div><script src="https://d3e54v103j8qbb.cloudfront.net/js/jquery-3.5.1.min.dc5e7f18c8.js?site=6419c5d9d88f8e2a12b04278" type="text/javascript" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script><script src="https://assets.website-files.com/6419c5d9d88f8e2a12b04278/js/css-hover.1d1c1406a.js" type="text/javascript" gapi_processed="true"></script><!--[if lte IE 9]><script src="//cdnjs.cloudflare.com/ajax/libs/placeholders/3.0.2/placeholders.min.js"></script><![endif]--><style>.tb_button {padding:1px;cursor:pointer;border-right: 1px solid #8b8b8b;border-left: 1px solid #FFF;border-bottom: 1px solid #fff;}.tb_button.hover {borer:2px outset #def; background-color: #f8f8f8 !important;}.ws_toolbar {z-index:100000} .ws_toolbar .ws_tb_btn {cursor:pointer;border:1px solid #555;padding:3px} .tb_highlight{background-color:yellow} .tb_hide {visibility:hidden} .ws_toolbar img {padding:2px;margin:0px}</style><div id="dse-quicksearch" style="position: fixed; z-index: 10000; display: none;">
<div id="dse-disabledpopup" style="cursor: pointer;display: block;position: relative;width: fit-content;padding: 8px;line-height: 16px;border: 1px solid #666;border-radius: 6px;background-color: #484644;font-style: normal;font-weight: normal;color: #fff;font-size: 13px;font-family: Roboto,Arial,Helvetica,sans-serif;box-shadow: 0px 3px 4px 0px rgba(0,0,0,.14);">
<span style="
float: left;
padding: 0px 12px 0px 4px;
">
You've turned off quick searches.
</span>
<span id="dse-undo" style="padding: 0px 4px 0px 8px;">
<span style="
width: 15px;
height: 15px;
float: left;
">
<svg enable-background="new 0 0 16 16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
<path d="m14.259 2.75c-1.159-1.16-2.688-1.744-4.207-1.743-1.52-.001-3.049.583-4.208 1.743l-2.843 2.827v-2.57c0-.552-.448-1-1-1h-.016c-.552 0-.984.448-.984 1v5c0 .552.432.993.984.993h5.016c.552 0 1-.441 1-.993s-.448-1-1-1h-2.601l2.859-2.843c.774-.773 1.779-1.156 2.793-1.157 1.014.001 2.019.384 2.793 1.157.772.774 1.155 1.778 1.156 2.793-.001 1.014-.384 2.019-1.157 2.793l-4.543 4.543c-.391.391-.391 1.024 0 1.414.391.391 1.024.391 1.414 0l4.543-4.543c1.16-1.159 1.743-2.688 1.742-4.207.002-1.52-.582-3.048-1.741-4.207z" fill="#fff"></path>
<path d="m0 0h16v16h-16z" fill="none"></path>
</svg>
</span>
Undo
</span>
</div>
<div id="dse-quicksearchdiv" style="display: inline-block;position: relative;height: 32px;border: 1px solid #666;border-radius: 6px;background-color: #484644; font-style: normal;font-weight: normal;color: #fff;font-size: 13px;font-family: Roboto,Arial,Helvetica,sans-serif;box-shadow: 0px 3px 4px 0px rgba(0,0,0,.14);">
<div id="dse-search" style="border-radius: 5px 0px 0px 5px;height:-webkit-fill-available;height:-moz-fit-content;float: left;line-height: 15px;text-align: center;cursor: pointer;box-sizing: border-box;">
<span style="
float: left;
padding: 8px 12px 8px 8px;
height: -webkit-fill-available;
">
Web
search
</span>
</div>
<div style=" border-left: 1px solid #D2D0CE;
float: left;
margin: 0px;
top: 0;
height: 32px;
"></div>
<div style="height:-webkit-fill-available;height:-moz-fit-content;float: left;padding: 8px 12px 8px 12px;line-height: 15px;text-align: center;cursor: pointer;" id="dse-copy">
Copy
</div>
<div style=" border-left: 1px solid #D2D0CE;
height: 32px;
float: left;
margin: 0px;
top: 0;
"></div>
<div id="dse-moreoptions" style="border-radius: 0px 5px 5px 0px;height:-webkit-fill-available;height:-moz-fit-content;width: 16px;float: left;padding: 8PX 8px 0px 8px;text-align: center; cursor: pointer;position: relative;">
<span style="width: 16px;">
<svg enable-background="new 0 0 16 16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
<path d="m1.5 6.5c-.828 0-1.5.672-1.5 1.5s.672 1.5 1.5 1.5 1.5-.672 1.5-1.5-.672-1.5-1.5-1.5zm6.5 0c-.828 0-1.5.672-1.5 1.5s.672 1.5 1.5 1.5 1.5-.672 1.5-1.5-.672-1.5-1.5-1.5zm6.5 0c-.828 0-1.5.672-1.5 1.5s.672 1.5 1.5 1.5 1.5-.672 1.5-1.5-.672-1.5-1.5-1.5z" fill="#fff"></path>
<path d="m0 0h16v16h-16z" fill="none"></path>
</svg>
</span>
</div>
<div>
<span style="width: 160px;border: 1px solid #666;border-radius: 6px;position: absolute;top: 40px;left: 105px;box-shadow: 0px 3px 4px 0px rgba(0,0,0,.14);background-color: #484644;overflow: hidden;" id="dse-popup">
<div style="padding: 8px 12px;line-height: 15px;font-size: 13px;cursor: pointer;text-align: left;" id="dse-lookup">
Define
</div>
<hr style=" border: 0.5px solid #D2D0CE;
margin: 0;
cursor: default;
height: 0px;
background-color: #3b3a39;">
<div style="padding: 8px 12px;line-height: 15px;font-size: 13px;cursor: pointer;text-align: left;" id="dse-disableFeature">
Turn off quick searches
</div>
</span>
</div>
</div>
</div></body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment