Scroll Section
Why_choose_section
July 3, 2022footer map
July 23, 2022
What Service We Offer
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut optio velit inventore, expedita quo laboriosam possimus ea consequatur vitae, doloribus consequuntur ex. Nemo assumenda laborum vel, labore ut velit dignissimos.
HTML
<div>
<h2 class="title">What <span>Service</span> We
Offer
</h2>
<p class=" mt-3 ">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut optio velit inventore, expedita quo laboriosam possimus ea consequatur vitae, doloribus consequuntur ex. Nemo assumenda laborum vel, labore ut velit dignissimos.</p>
<a class="btn btn-primary my-5" href="#">More Info </a>
</div>
<div class="screen">
<img src="https://i.imgur.com/aFFEZ9U.jpg">
</div>
<div class="screen">
<img src="https://i.imgur.com/aFFEZ9U.jpg">
</div>
CSS
.screen {
display: block;
width: 357px;
height: 350px;
overflow: hidden;
position: relative;
border: 2px solid #b3b3b3;
border-radius: 1.25em;
margin: 0 auto;
}
.screen img {
bottom: -1513px;
width: 100%;
height: auto;
position: absolute;
z-index: 0;
margin:0;
padding:0;
-webkit-transition: top 11s;
-moz-transition: top 11s;
-ms-transition: top 11s;
-o-transition: top 11s;
transition: bottom 11s;
}
.screen:hover img {
bottom: 0;
-webkit-transition: all 11s;
-moz-transition: all 11s;
-ms-transition: all 11s;
-o-transition: all 11s;
transition: all 11s;
}
