Markup – Demo 1

1

2

3

4

5

6

<figureclass="wpf-demo-1">

<ahref="#"><imgsrc="img/demo1/1.jpg"alt="img">a>

<figcaptionclass="view-caption">

<ahref="#">View+a>

figcaption>

figure>

As you can see above we have used the wpf-demo-1 class to the container figure element in order to apply the demo 1 effect. If you want to apply any other effect for example demo 5 then use wpf-demo-5 instead of wpf-demo-1. That’s it.

CSS3 Rules – Demo 1

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

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

.wpf-demo-1{

background-color: #FFF;

display: block;

width: 300px;

height: 300px;

overflow: hidden;

position: relative;

box-shadow: 0000#555;

-webkit-transition: all0.5s;

-moz-transition: all0.5s;

-ms-transition: all0.5s;

-o-transition: all0.5s;

transition: all0.5s;

opacity: 1;

filter: alpha(opacity=100);

}

.wpf-demo-1img {

height: 100%;

width: 100%;

}

.wpf-demo-1:hover .view-caption{

opacity: 1;

filter: alpha(opacity=100);

border: 15pxsolid#fff;

}

.wpf-demo-1:hover .view-captiona {

padding-top: 44.5%;

}

.wpf-demo-1.view-caption{

background-color: rgba(34, 167, 240, 0.8);

border: 10pxsolid#fff;

bottom: 0;

color: #fff;

left: 0;

margin: 10px;

position: absolute;

opacity: 0;

filter: alpha(opacity=0);

right: 0;

text-align: center;

top: 0;

z-index: 99;

-webkit-transition: all0.75s ease-in-out 0s;

-moz-transition: all0.75s ease-in-out 0s;

-ms-transition: all0.75s ease-in-out 0s;

-o-transition: all0.75s ease-in-out 0s;

transition: all0.75s ease-in-out 0s;

}

.wpf-demo-1.view-captiona {

color: #fff;

display: block;

font-size: 20px;

font-weight: bold;

height: 100%;

padding-top: 40.5%;

-webkit-transition: all0.75s ease-in-out 0s;

-moz-transition: all0.75s ease-in-out 0s;

-ms-transition: all0.75s ease-in-out 0s;

-o-transition: all0.75s ease-in-out 0s;

transition: all0.75s ease-in-out 0s;

}

The above rules stands for the demo 1 effect, other effects rules can be found in the css/main.css file. SASS files are also included.

jquery.adaptive-backgrounds.js is a cool plugin that extracts the dominant color from the images on your web page and applies the color to their parent.

…and finally…

jQuery.planetarium is a jQuery plugin that allows you to construct interactive planets and build the Universe!

jquery.wanker.js is a humourous jQuery plugin that reveals a public service announcement when people start excessively resizing their desktop browser as they try to see your responsive breakpoints. As they say ‘The web is meant to be read, not squished!’