Hi Everyone
NOW I will represent how to make images effect
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Images Effect</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="wrapper">
<img src="images/0.jpg" alt="" />
<div class="content">
<div class="text">
<h3>MOBILE APPLICATIONS</h3>
<p>
we offer full support for the apps that are
created by our side and introduce web
support if needed. A complete integration
between mobile app and online website can
give your business the boost needed to go
beyond reaching clients barriers.
</p>
</div>
</div>
</div>
<div class="wrapper">
<img src="images/1.jpg" alt="" />
<div class="content">
<div class="text">
<h3>ADVERTISING</h3>
<p>
We provide a wide variety of advertising
services such as Creative Development,
Copywriting, Print: Magazine, Newspaper,
Direct Mail/Email Campaigns, Outdoor:
Billboards, Transit and Multimedia Displays
</p>
</div>
</div>
</div>
<div class="wrapper">
<img src="images/2.jpg" alt="" />
<div class="content">
<div class="text">
<h3>WEB DEVELOPMENT</h3>
<p>
ProMedia has been doing online shopping
website development since 2013 in addition
to online payment in Egypt. Egyptian
consumers were clear about what factors
sway their online purchasing decision,
citing the reputation of website, security
of payment facility and speed of transaction
as the most important considerations when
making an online purchase.
</p>
</div>
</div>
</div>
</body>
</html>
body {
margin: 150px auto;
width: 1338px;
}
.wrapper {
width: 420px;
height: 250px;
float: left;
margin-right: 20px;
box-shadow: 0px 0px 25px black;
border: 3px solid white;
overflow: hidden;
}
.wrapper img {
width: 100%;
height: 100%;
}
.content {
width: 420px;
height: 250px;
background: #000;
opacity: 0.6;
transition: transform 300ms;
position: relative;
}
.wrapper:hover .content {
transform: translateY(-253px);
}
.text {
color: #fff;
width: 100%;
height: 40px;
background: #00300a;
text-align: center;
padding-top: 10px;
position: absolute;
margin-top: 30px;
cursor: pointer;
display: none;
}
.wrapper:hover .text {
display: block;
}
.wrapper:hover img {
transform: scale(1,1);
}