Last active
January 26, 2016 02:35
-
-
Save MuseMetrics/d8ffa596128d57f0f9ca to your computer and use it in GitHub Desktop.
(Bootstrap) Portfolio Screen Animations
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!-- | |
Portfolio Screens are a name I use to designate image overlays | |
since I use them for my portfolio items most often. The screens | |
are much more involved than just using a slightly opaque background | |
cover since the wrappers include titles, descriptions, and buttons. | |
Upon hovering the portfolio screen, various inner elements slide | |
from divers directions to produce a subtle, but noticeable animated | |
effect. In order to prevent horizontal scroll bars on mobile devices, | |
I used media queries to change the horizontal slide features to | |
vertical. | |
--> | |
<!--Milton Law Firm Portfolio Screen--> | |
<div class="col-sm-6 text-center"> | |
<div class="panel panel-default"> | |
<div class="panel-body"> | |
<div class="portfolio_screen"> | |
<img src="img/mlf_portfolio_screen.png" class="img-responsive"> | |
<div class="portfolio_screen_caption"> | |
<div class="portfolio_screen_caption_content"> | |
<div class="portfolio_screen_name"> | |
<h3>Milton Law Firm</h3> | |
</div> | |
<div class="portfolio_screen_description"> | |
<p>Bootstrap Framework</p> | |
</div> | |
<div class="portfolio_screen_preview"> | |
<a href="http://musemetrics.org/MiltonLawFirm" target="_blank"><button class="btn btn-primary">Preview</button></a> | |
</div> | |
</div> | |
</div> | |
</div> | |
</div> | |
</div> | |
</div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* | |
Portfolio Screens are a name I use to designate image overlays | |
since I use them for my portfolio items most often. The screens | |
are much more involved than just using a slightly opaque background | |
cover since the wrappers include titles, descriptions, and buttons. | |
Upon hovering the portfolio screen, various inner elements slide | |
from divers directions to produce a subtle, but noticeable animated | |
effect. In order to prevent horizontal scroll bars on mobile devices, | |
I used media queries to change the horizontal slide features to | |
vertical. | |
*/ | |
/*Portfolio Screens*/ | |
.portfolio_screen { | |
display: block; | |
position: relative; | |
margin: 0 auto; | |
} | |
.portfolio_screen .portfolio_screen_caption { | |
display: block; | |
position: absolute; | |
bottom: 0; | |
width: 100%; | |
height: 100%; | |
text-align: center; | |
color: #fff; | |
opacity: 0; | |
background: rgba(144,178,215,.88); | |
} | |
.portfolio_screen .portfolio_screen_caption .portfolio_screen_caption_content { | |
position: absolute; | |
top: 50%; | |
width: 100%; | |
text-align: center; | |
transform: translateY(-50%); | |
} | |
.portfolio_screen_name h3 { | |
font-family: "Yesteryear", sans-serif; | |
font-size: 2.55em; | |
transform: translateX(-25px); | |
} | |
.portfolio_screen_description p { | |
font-family: "Josefin Sans", sans-serif; | |
font-size: 1.25em; | |
padding: 0 40px; | |
transform: translateX(25px); | |
} | |
.portfolio_screen:hover h3, | |
.portfolio_screen:focus h3 { | |
transform: translateX(0px); | |
transition-delay: 150ms; | |
} | |
.portfolio_screen:hover p, | |
.portfolio_screen:focus p { | |
transform: translateX(0px); | |
transition-delay: 150ms; | |
} | |
.portfolio_screen:hover .portfolio_screen_caption, | |
.portfolio_screen:focus .portfolio_screen_caption { | |
opacity: 1; | |
} | |
/*Media Queries*/ | |
@media (max-width: 768px) { | |
.portfolio_screen_name h3 { | |
font-family: "Yesteryear", sans-serif; | |
font-size: 1.55em; | |
} | |
.portfolio_screen_description p { | |
font-family: "Josefin Sans", sans-serif; | |
font-size: 1.10em; | |
padding: 0 40px; | |
} | |
.portfolio_screen_name h3 { | |
font-family: "Yesteryear", sans-serif; | |
font-size: 2.00em; | |
transform: translateY(-25px); | |
} | |
.portfolio_screen_description p { | |
font-family: "Josefin Sans", sans-serif; | |
font-size: 1.25em; | |
padding: 0 40px; | |
transform: translateY(25px); | |
} | |
.portfolio_screen:hover h3, | |
.portfolio_screen:focus h3 { | |
transform: translateY(0px); | |
transition-delay: 150ms; | |
} | |
.portfolio_screen:hover p, | |
.portfolio_screen:focus p { | |
transform: translateY(0px); | |
transition-delay: 150ms; | |
} | |
.btn { | |
font-size: 12px; | |
padding: 3px 6px; | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment