Creating a Image Gallery with Effects - 1 - Sass-Scss

---

Repository

https://github.com/sass/sass

What Will I Learn?

• You will learn how to create an image bar at the center of your page.
• You will learn how to insert images with nth-child() function for list items on scss.
• You will learn how to use display: table and display: table-cell function.
• You will learn how to use table-layout: fixed function.
• You will learn how to center an image if we play with its width.
• You will learn how to exclude an object from a hover and define double hover on it.
• You will learn how to combine functions with different objects.

Requirements

• Any text editor. (Brackets, Atom, Notepad++)
• Basic HTML knowledge
• Basic SCSS code knowledge
• SASS installed.
• Local server (Wampserver)
• Any browser

Resources

• https://css-tricks.com/almanac/properties/d/display/
• https://css-tricks.com/hover-on-everything-but/
• https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child
• https://developer.mozilla.org/en-US/docs/Web/CSS/table-layout
• https://css-tricks.com/snippets/css/keyframe-animation-syntax/
• https://sass-lang.com/
• https://github.com/sass/sass
• https://www.w3schools.com
• http://thesassway.com/
• http://sass-lang.com/documentation/file.SASS_REFERENCE.html
• https://sass-lang.com/install

Difficulty

• Intermediate

Description

In this tutorial we will create a box with different color tabs in it and with hover function we will change its color. We will do the same thing also with images. If you follow this tutorial download all files from my github page and change the values. You can use comment mark(/*between these marks*/) to deactivate codes and test it. With this way it will be more useful for you and you can test and understand the codes better.

---

1- Before you start be sure that you run our sass code in the directory of site files. Our command is sass --watch sass:css. It will translate all codes that you write in scss file to css file. After that, write a basic html file on root directory and into body section 1 division with a class for our lists. And we need images for our effects..

---

---

**2- On our scss file we are setting a background to our body. After that we style our navigation bar with its size and centering and also a hover on text. **

---

3- Our main work will on imagebar class so we are positioning it to the center of our page. After that we define its width as 100% to let it use whole width of page but its height will be 360px because my all images are 960x360 px.As second step we are defining our ul as table and with table-layout: fixed it will use whole width and render faster.

---

4- Now we define for all list items common rules. Each of them will hace a border and its width will be 10% of the page but in this 10% its center will be visible.

---

5- In this part we are inserting our images for each list items and therefore we use nth-child() function.

---

7- Here we are defining 2 hover effect. First one will effect all images. Their width will be 4% of the page and opacity will be 0.5. With second one we are exluding the selected one from first hover and it will have 64% of the page with width and its opacity will be 1.

---

8- And finally our end work...

---

Video Tutorial

Curriculum

• Color&Image Changes on Tabs and creating them with Sass-Scss
• Creating a Button with Push effect as Animation with Sass-Scss
• Defining a video as Background and creating a page
• Creating a Web-Page with Information Box and Animations - Sass-Scss
• Background Image Transitions - Flat WebPage - Sass-Scss
• Animated Left Menu Design with Sass-Scss
• Styling Boxes With Lighting Effect - Sass-Scss
• How to Play with Borders and Create Design Shapes with Sass-Scss
• Playing With Text and PNG Shadows and Animate them with Sass Scss
• Color Animations & Using as Background - 360° Infinite Image 3D with Sass-Scss
• Curriculum Gallery Page Design with Sass-Scss using gifs and hyperlinks
• Intro Page with Text Animation Using Sass - Scss
• Image Dimensions and 3D 360deg rotate effect with Sass Scss
• Rounded Image With Rainbow Color Shadow Animation with Sass-Scss
• Creating a Personal Card with Animation with Sass Scss codes and meaning of the codes
• Creating a Contact Form from a simple version to a stylish animated one with Sass Scss
• Transition effect with Sass (Scss)

Proof of Work Done

https://github.com/omersurer/Sass-Scss-Tutorials/tree/master/Image_Gallery_Effects_1