"hover img effect"
Bootstrap 3.0.0 Snippet by evarevirus

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<body>
<ul id="projects">
<li id="p1" class="flipper">
<div class="front"><img src="https://dribbble.s3.amazonaws.com/users/1960/screenshots/948220/icons_1x.png" alt="">
</div>
<div class="back">
<h2>Glyph Profiles</h2>
<p class="author">by <a href="http://dribbble.com/brandclay">Sean Farrell</a></p>
<p>Doing some illustrations for Glyph. From left to right: Foodie, Explorer, Gas Guzzler, Gatherer, Superstar, and Shopaholic.</p><p>
Probably going to iterate some more on foodie. I like it because it's minimal, but some don't get that it's sushi.</p>
<p class="date">Feb 18, 2013</p>
</div>
</li><!--
--><li id="p2" class="flipper">
<div class="front"><img src="https://dribbble.s3.amazonaws.com/users/8868/screenshots/949182/_dribbble____024_-_itsy_theme__22minimal_22.png" alt="">
</div>
<div class="back">
<h2>Itsy theme "minimal"</h2>
<p class="author">by <a href="http://dribbble.com/hiroshi1012">hiroshi</a></p>
<p>Itsy Theme "minimal"</p><p>
↓ Download<br />
https://cl.ly/Mzol</p>
<p class="date">Feb 18, 2013</p>
</div>
</li><!--
--><li id="p3" class="flipper">
<div class="front"><img src="https://dribbble.s3.amazonaws.com/users/3587/screenshots/948687/untitled-1.jpg" alt=""></div>
<div class="back">
<h2>Portfolio Design</h2>
<p class="author">by <a href="http://dribbble.com/NpaulFlavius">Paul Flavius Nechita</a></p>
<p>A concept I've put together for my lovely Elena Greta Apostol. This is meant to be a portfolio/store that should reflect the quality of her work.</p><p>
I'd really like to know what you guys think.</p>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
body {
background: #DDD;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #555;
font-size: 15px;
line-height: 1.3em;
}
h2 {
font-size: 20px;
color: #333;
margin: 7px 0;
}
a:hover {
text-decoration: none;
color: #205F82;
}
a:link,a:visited {
color: #4083A9;
outline: none;
text-decoration: none;
}
.author {
font-size: 13px;
margin: 5px 0 25px;
}
.date {
font-size: 13px;
font-weight: bold;
}
/**/
#projects {
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments: