<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<div class="box">
<div class="imgbx">
<img src="https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/8cf3be3f-218e-4d0e-8f75-4285c4933a94/dbgf8po-b027a366-847b-427e-8453-d860f1688308.png/v1/fill/w_792,h_1009/playerunknown_s_battlegrounds_render_by_umdiegoqualquer_dbgf8po-pre.png?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7ImhlaWdodCI6Ijw9MTA4MCIsInBhdGgiOiJcL2ZcLzhjZjNiZTNmLTIxOGUtNGQwZS04Zjc1LTQyODVjNDkzM2E5NFwvZGJnZjhwby1iMDI3YTM2Ni04NDdiLTQyN2UtODQ1My1kODYwZjE2ODgzMDgucG5nIiwid2lkdGgiOiI8PTg0OCJ9XV0sImF1ZCI6WyJ1cm46c2VydmljZTppbWFnZS5vcGVyYXRpb25zIl19.xxuqQOZgoAxUm8MvLfmtR7KQwVmmlZ1UJhpSYk7w1kM" alt="">
</div>
<div class="content">
<h2> PUBG MOBILE</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
Ipsum labore minima cumque reprehenderit inventore ut
temporibus illo numquam vel dolores name, et aut odio
quibusdam name dignissimos voluptate, sunt ea reiciendis!</p>
<button>learn more</button>
</div>
</div>
</div>
* {
padding: 0%;
margin: 0%;
font-family: "poppins", sans-serif;
font-weight: 600;
text-transform: capitalize;
transition: 0.5s;
}
.container {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(rgb(0, 179, 255), rgb(13, 0, 255));
}
.box {
width: 500px;
height: 300px;
/* border-radius: 20px; */
background: linear-gradient(rgb(0, 179, 255), rgb(13, 0, 255));
position: relative;
overflow: hidden;
box-shadow: 10px 10px 30px rgb(0, 0, 0, 0.3);
}
.content {
width: 250px;
position: absolute;
right: -100%;
top: 10px;
/* text-align: justify; */
color: white;
opacity: 0;
transition: 0.5s;
cursor: pointer;
/* transition-delay: 0.2s; */
}
.content h2 {
font-weight: 600;
text-align: center;
/* line-height: 50px; */
margin-top: 10px;
letter-spacing: 2px;
}
.content p {
margin: 10px 15px;
font-weight: lighter;
line-height: 20px;
/* letter-spacing: 1px; */
}
.content button {
position: absolute;
left: 35%;
margin-top: 10px;
padding: 10px;
color: white;
border: none;
font-size: 18px;
/* border-radius: 10px; */
cursor: pointer;
background-color: rgb(0, 191, 255);
}
.imgbx img {
position: absolute;
left: 15%;
top: 5px;
width: 320px;
transition: 0.5s;
transition-delay: 0.3s;
}
.box:hover .imgbx img {
width: 350px;
top: 10px;
left: -11%;
transition-delay: 0s;
}
.box:hover .content {
opacity: 1;
transition-delay: 0.3s;
right: 0%;
}
// if you want work with me please contact me (ASAP).
// https://www.facebook.com/profile.php?id=61564970261232
