Web_Designs2/design38.html at master · TanuSharma2511/Web_Designs2 · GitHub

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
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    body{
        font-family:sans-serif;
        margin:0;
        padding:0;
        display:flex;
        justify-content: center;
        align-items:center;
        min-height:100vh;
        background:#003246;
    }
    .container{
        width:1000px;
        display:flex;
        flex-wrap:wrap;
        justify-content: space-between;
    }
    .box{
        position:relative;
        width:300px;
        height:400px;
        background:#000;
        box-shadow:0 30px 30px rgba(0,0,0,.5);
    }
    .box .imgBx{
         position:absolute;
         top:0;
         left:0;
         width:100%;
         height:100%;
    }
    .box .imgBx img{
        position:absolute;
        top:0;
        left:0;
        width:100%;
        height:100%;
        object-fit: cover;
        transition:0.5s;
    }
    .box:hover .imgBx img{

         opacity:0;

    }
    .box .content{
        position:absolute;
        bottom:20px;
        left:10%;
        width:80%;
        height:60px;
        background:#000;
        transition:0.5s;
        overflow: hidden;
        padding:15px;
        box-sizing:border-box;
    }
    .box:hover .content{
        width:100%;
        height:100%;
        bottom:0;
        left:0;

    }
    .box .content h3{
        color:#fff;
        margin:0;
        padding:0;
        font-size:20px;
        text-align: center;
    }
    .box .content p{
        color:#fff;
        margin:10px 0 0 ;
        padding:0;
        opacity:0;
        line-height: 1.2em;
        transition:0.5s;
        text-align: center;
    }
    .box:hover .content p{
        opacity:1;
        transition-delay:0.5s;
    }
    </style>
</head>
<body>
    <div class="container">
        <div class="box">
            <div class="imgBx">
                <img src="watch1.jpg">

            </div>
            <div class="content">
             <h3>Post Title One</h3>
             <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quisquam, doloremque. Dolores repellendus eligendi hic corrupti, quas quae fuga recusandae obcaecati excepturi sit, error reiciendis, quis perferendis nihil officia porro nobis Lorem ipsum dolor sit amet consectetur, adipisicing elit. Minima eligendi ea sapiente modi sunt nostrum error eaque officia deserunt, quae veritatis, fugiat eius reiciendis voluptates quos, consequuntur impedit enim animi.</p>
            </div>
        </div>
        <div class="box">
                <div class="imgBx">
                    <img src="watch2.jpg">

                </div>
                <div class="content">
                 <h3>Post Title Two</h3>
                 <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quisquam, doloremque. Dolores repellendus eligendi hic corrupti, quas quae fuga recusandae obcaecati excepturi sit, error reiciendis, quis perferendis nihil officia porro Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio minima labore maxime nostrum fugit nam sunt placeat officia similique pariatur velit vero, obcaecati in ad ratione id praesentium. Non, recusandae?</p>
                </div>
            </div>
            <div class="box">
                    <div class="imgBx">
                        <img src="watch3.jpg">

                    </div>
                    <div class="content">
                     <h3>Post Title Three</h3>
                     <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quisquam, doloremque. Dolores repellendus eligendi hic corrupti, quas quae fuga recusandae obcaecati excepturi sit, error reiciendis, quis perferendis nihil officia porro Lorem ipsum dolor sit amet consectetur, adipisicing elit. Tenetur inventore illo quas voluptas rem qui molestiae nemo a quam! Voluptates facilis veritatis omnis aperiam repudiandae unde, soluta aut sunt eum!</p>
                    </div>
                </div>
    </div>
</body>
</html>