### Details
<br> 


**Tutorial about:** Flexible Box Hover Effect With CSS&HTML  codes. ( Turkish Video Tutorial)
**Video  Language :** Turkish Language 
**Githup link:** You can download all files -->  [CSS Education](https://github.com/rdvnn/css-education)
>**Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g., fonts, colors, spacing) to Web documents. [CSS More Information](https://www.w3.org/Style/CSS/)**

### What We Can Learn?
We going to  learn how to create flexible box hover effect with CSS& and how to  call  images , container , box and how to add background images, text,transform, , margin,padding value  with CSS&HTML codes in this video.

### We Learn About
- Opacity
- Flex Grow
- Line Height
- Border
- Hover
- Transition
- Transform
- Text Transform
- Uppercase



### Requirements
**1-** ATOM Program
**2-** Basic ATOM,  usage information.
**3-** Basic CSS code knowledge.
**4-** Basic HTML code knowledge.

### My Operating System
![image.png](https://res.cloudinary.com/hpiynhbhq/image/upload/v1516379881/libdd6r5olbo0zfe18ct.png)

### Difficulty
- Intermediate  Level

### Technical Aspects
- Opacity - Letter Spacing- Box Shadow-Rotate- Flex Grow -Line Height - Position  - Absolute - Transform  - Transition -Box sizing.

### Description
We talked about  how to create Flexible Box Hover Effect With CSS&HTML and how to add opacity ,font family,span,border box,transform .I describe the CSS and HTML in video.Also My github repository is [HERE](https://github.com/rdvnn/css-education) I added these all code,information my github repository.You can reach all files from my repository.
Also with CSS and HTML codes we are continue  a series 

**Video Tutorial - Turkish Language - 720p**
https://youtu.be/16mEcn5fsIk
[Using IMG Source1](https://pixabay.com/en/strawberries-fruit-red-ripe-sweet-1396330/)
[Using IMG Source2](https://pixabay.com/en/food-photography-salad-leaves-2834549/)
[Using IMG Source3](https://pixabay.com/en/japan-landscape-spring-plant-2218788/)
[Using IMG Source4](https://pixabay.com/en/christmas-tree-ornament-deco-light-3023415/)
[Using IMG Source5](https://pixabay.com/en/persian-oak-wood-parrotia-persica-3064187/)


### Curriculum
[Horizontal Menu](https://utopian.io/utopian-io/@rdvn/creating-soft-transition-and-horizontal-menu-or-with-atom-turkish-video-tutorial)
[Vertical Menu](https://utopian.io/utopian-io/@rdvn/vertical-menu-with-atom-or-turkish-video-tutorial)
[Image Slider](https://utopian.io/utopian-io/@rdvn/image-slider-with-css-or-turkish-video-tutorial)
[ Contact Form ](https://utopian.io/utopian-io/@rdvn/create-contact-form-with-css-and-html-or-turkish)
### [ATOM OFFICIAL WEBSITE](https://atom.io/) & [GITHUB REPOSITORY](https://github.com/atom/atom) & [MY GITHUB REPOSITORY](https://github.com/rdvnn/css-education)

### And More Details About Video <br>

### Github Repository
![12.jpg](https://res.cloudinary.com/hpiynhbhq/image/upload/v1517129967/mafczhhguxifeluhnrfu.jpg)


### CSS Codes1
![CSS Codes1 @rdvn.jpg](https://res.cloudinary.com/hpiynhbhq/image/upload/v1517128435/sowyqrp2rbanjmvdcbia.jpg)


### CSS Codes2
![CSS Codes2 @rdvn.jpg](https://res.cloudinary.com/hpiynhbhq/image/upload/v1517128232/xs5whidwvjm8qbptyjcx.jpg)


### HTML Codes
![HTML Codes @rdvn.jpg](https://res.cloudinary.com/hpiynhbhq/image/upload/v1517128309/f7jx2ej2fnemr2nzqrlv.jpg)


### CSS&HTML CODES
```
body
{
  margin: 0;
  padding: 0;
  font-family: sans-serif;
}
.container
{
  width: 100vw;
  height: 100vh;
  display: flex;
  box-sizing: border-box;
}
.container .box
{
  width: 20vw;
  text-align: center;
  line-height: 100vh;
  flex-grow: 1;
  background-size: cover;
  background-position: center;
  transition: 1s;
}
h1
{
  margin: 0;
  padding: 0;
  line-height: 100vh;
  font-size: 2em;
  background: rgba(0,0,0,.8);
  transition: .5s;
}
h1 span
{
  background: rgba(255, 255, 255, 0);
  width: 100%;
  transition: 1s;
  color: #fff;
  padding: 25px 20px;
  text-transform: uppercase;
  letter-spacing: 2px;
}
.box:hover h1 span
{
  color: #262626;
  background: rgba(255,255,255,.8);
  letter-spacing: 10px;
  box-shadow: 0 5px 15px rgba(0,0,0,.5);
}
.box:hover h1
{
  background: rgba(0,0,0,0);
}
.box:hover
{
  width: 40vw;
}
.container .box:nth-child(1)
{
  background: url(1.jpg);
}
.container .box:nth-child(2)
{
  background: url(2.jpg);
}
.container .box:nth-child(3)
{
  background: url(3.jpg);
}

.container .box:nth-child(4)
{
  background: url(4.jpg);
}

.container .box:nth-child(5)
{
  background: url(5.jpg);
}


```
-----
```
<!doctype html>
<html>
<head>
      <meta charset="utf-8"
      <title="Esnek kutu efekti"</title>
      <link rel="stylesheet" href="style.css">
    </head>
    <body>
      <div class="container">
        <div class="box"><h1><span>One</span></h1></div>
        <div class="box"><h1><span>Two</span></h1></div>
        <div class="box"><h1><span>Three</span></h1></div>
        <div class="box"><h1><span>Four</span></h1></div>
        <div class="box"><h1><span>Five</span></h1></div>
      </div>

</body>
</html>


```

<br>
--------------------------
-----------------------------

Author : @rdvn


<br /><hr/><em>Posted on <a href="https://utopian.io/utopian-io/@rdvn/flexible-box-hover-effect-with-css-and-html-or-turkish-video-tutorial">Utopian.io -  Rewarding Open Source Contributors</a></em><hr/>