Line 30-33: Make entire area clickable to corresponsing pages

Line 35-37: Inverse color technique

Here we inverse the image color when the mouse hovers. The CSS code is as follows:

1

2

3

4

div.project-block:hover{

-webkit-filter:invert(100%);

filter:invert(100%);

}

Here :hover tells the website to apply the style in the bracket when the mouse hovers.

The CSS filter property applies simple graphical effects to the specified tag (like instagram filter). You can use this link to play with various effects online.

The -webkit-filter is a CSS property specific for the webkit rendering engine used by Safari/Chrome. Adding this besides the regular filter property ensures this CSS effect is supported in different browsers.

You can further add Mozilla CSS for better support in Firefox browser.

Line 35-37: Image centering in a changing-size area

When using Bootstrap, areas can be resized by changing browser’s width. Thus we have to make sure the background image remains centered after resizing. Here is the CSS codes of doing so:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

.block-img-window{

position:relative;

margin-left:auto;

margin-right:auto;

margin-top:30px;

width:80%;

padding-bottom:60%;

overflow:hidden;

}

.block-img{

/* centering */

position:absolute;

top:-9999px;

bottom:-9999px;

left:-9999px;

right:-9999px;

margin:auto;

/* scale to make image smaller*/

height:250px;

width:auto;

}

Create a Home Page

It’s time to create our home page in the admin panel. Simply go to Pages -> Add New , enter “Home” as title, and select “Home Page” as template. Publish it.

Then go to Settings -> Reading . Set Front Page Display to A Static Page and Choose your home page.