You have never seen this card hover before
Tags: uiweekly, ux, css, webdev
Published: 2021-05-06 12:06:14

#Demo

{% codesandbox bold-browser-po1ig %}

>I suggest you to view this demo in full new window view. yeah it's not responsive but you can make it. Click on the top right most button to view full new window.

#Video tutorial : )

{% youtube 3qMjTZDwxuU %}
>If you found this tutorial useful then show your support by subscribing my youtube channel and following me.

#Let see how to code this - 

first make a two files `index.html` and `style.css`. Then write the basic HTML structure also link css file to `index.html`.

Now create a `<div>` with class `.card` and inside that create a `<div>` with class `.design-elements` that will hold our all styling spans. Now create a `<div>` inside of that make four `<span>` with same class `.dot` and then outside this div but inside `.design-element` create another `<div>` and inside of that make four `<span>` also with class name `.lines`.

Done we will add our content later. This should look like this.
```html
<div class="card">
     <!-- designing element -->
     <div class="design-elements">
         <div>
             <span class="dot"></span>
             <span class="dot"></span>
             <span class="dot"></span>
             <span class="dot"></span>
          </div>

          <div>
              <span class="lines"></span>
              <span class="lines"></span>
              <span class="lines"></span>
              <span class="lines"></span>
          </div>
      </div>
</div>
```

Now let's style these. So add this to your stylesheet.
```css
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body{
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    overflow: hidden;
    background: rgb(44, 44, 44);
}

.card{
    width: 300px;
    height: 450px;
    position: relative;
    background-image: url(img1.jpg);
    background-size: cover;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: .5s;
}
.design-elements{
    position: absolute;
    width: 95%;
    height: 97%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: .5s;
}

.dot{
    position: absolute;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #ff5050;
    transform: scale(0);
}

.dot:nth-child(1){
    top: -15px;
    left: -15px;
}

.dot:nth-child(2){
    top: -15px;
    right: -15px;
}

.dot:nth-child(3){
    bottom: -15px;
    right: -15px;
}

.dot:nth-child(4){
    bottom: -15px;
    left: -15px;
}

.card:hover .dot{
    transform: scale(1);
    transition: 1s;
}

.card:hover .dot:nth-child(2){
    transition-delay: .3s;
}

.card:hover .dot:nth-child(3){
    transition-delay: .6s;
}

.card:hover .dot:nth-child(4){
    transition-delay: .9s;
}

.lines{
    position: absolute;
    background: #fff;
    z-index: -1;
    transform: scale(0);
}

.lines:nth-child(1){
    width: 3px;
    height: 100%;
    transform-origin: top;
    top: 0;
    left: 0;
}

.lines:nth-child(2){
    width: 100%;
    height: 3px;
    transform-origin: left;
    bottom: 0;
    left: 0;
}

.lines:nth-child(3){
    width: 3px;
    height: 100%;
    transform-origin: bottom;
    right: 0;
    bottom: 0;
}

.lines:nth-child(4){
    width: 100%;
    height: 3px;
    transform-origin: right;
    top: 0;
    right: 0;
}

.card:hover .lines{
    transform: scale(1);
    transition: 1s;
    transition-delay: 1.5s;
}

.card:hover{
    transform: translateY(-10px);
    box-shadow: 0 20px 20px rgba(0, 0, 0, 0.4);
}

.card:hover .design-elements{
    background: #fff;
    transform: translate(-50%, -50%) rotate(-5deg);
    transition-delay: 2.5s;
}

.card-content{
    padding: 40px;
    position: relative;
    color: #2f2f2f;
    font-family: roboto, sans-serif;
    text-align: center;
    opacity: 0;
}
```
what we did till we did almost everything : ). this styles are just setting up `.card` width and heights and some other properties and then we are styling `.dot` here where we set their width and height with border-radius. after that we select each `.dot` element with `:nth-child` selector and gave different `top, left, right, bottom` values to properly position them to the corners. After that we are styling out `.lines` where we set each element different width and height with different top left right bottom values to properly align them to the edges. and at last we made `.dot` and `.lines` `scale` to 0 and setting their `scale` back to 1 whenever `.card` is being hover.

Now let's add content to out card. So inside `.card` element in `index.html` file but outside of `.design-elements` add a `<div>` with class `.card-content` and inside of that add `<h1>` and `<p>` and write in whatever you want.After this our card structure should look like this.

```html
<div class="card">
      <!-- designing element -->
      <div class="design-elements">
            <div>
                 <span class="dot"></span>
                 <span class="dot"></span>
                 <span class="dot"></span>
                 <span class="dot"></span>
            </div>

            <div>
                 <span class="lines"></span>
                 <span class="lines"></span>
                 <span class="lines"></span>
                 <span class="lines"></span>
            </div>     
     </div>

     <div class="card-content">
           <h1 class="title">card 1</h1>
           <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloribus quae expedita ab sint nemo animi amet numquam nostrum quos tempora.</p>
     </div>
</div>
```
then just copy the structure for 2 more time to make 3 cards in total and just add some basic style again.

```css
.card:nth-child(2){
    background-image: url(img2.jpg);
}

.card:nth-child(3){
    background-image: url(img3.jpg);
}

.card-content{
    padding: 40px;
    position: relative;
    color: #2f2f2f;
    font-family: roboto, sans-serif;
    text-align: center;
    opacity: 0;
}

.card:hover .card-content{
    opacity: 1;
    transition: .5s;
    transition-delay: 3s;
}

.title{
    font-size: 60px;
    text-transform: capitalize;
    margin-bottom: 30px;
}

p{
    font-size: 18px
}
```
So what this style do this will set different images to each cards and some little bit of style to its content.

We are done we made this card hover effect. I hope you like it. If you find any mistake I made feel free to tell me in comment section.

Thanks for visiting : )