Image Hover Effects
May 5, 2022Why_choose_section
July 3, 2022
<!-- button box -->
<div class="ns_btn_style_1">
<a href="#">
<div class="ns_btn_style_1_grid">
<div class="ns_btn_style_1_item ns_btn_style_1_item_left">
<h4 class="ns_btn_title">
Design.
</h4>
<p class="ns_btn_style_1_subtitle">
Handcraft the <br>user experience
</p>
</div>
<div class="ns_btn_style_1_arrow">
<i class="fa-solid fa-right-long"></i> <!-- Replace Right arrow with theme icons if required-->
</div>
</div>
</a>
</div>
<!-- button box End -->
.ns_btn_style_1 a {
color: inherit;
text-decoration: none;
}
.ns_btn_title {
font-size: 36px;
margin: 0 0 15px 0;
font-family: inherit; /* uses theme font */
font-weight: 600;
line-height: 42px;
color: #000;
}
.ns_btn_style_1 {
background-color: #f8e5e5;
border-radius: 10px;
width: 100%; /* width to be changed as per preference */
padding: 1em;
position: relative;
z-index: 1;
overflow: hidden;
}
/* Using image curve effect */
.ns_btn_style_1::before {
content: "";
position: absolute;
top: 100%;
left: 0;
width: 100%;
height: 100%;
background-image: url(1.png); /* Image to be changed as per prefered color */
background-size: contain;
background-repeat: no-repeat;
z-index: -1;
transition: top 500ms ease-in;
}
/* Gives background color to make up for the curve effect */
.ns_btn_style_1::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #eaa7a7;
z-index: -1;
transition: top 500ms ease-in;
}
/* Image Hover speed */
.ns_btn_style_1:hover::before {
top: -100%;
}
/* background Hover speed */
.ns_btn_style_1:hover::after {
top: -150%;
}
/* icon smooth animation */
.ns_btn_style_1 i {
transition: padding-left 250ms linear;
}
/* icon on hover */
.ns_btn_style_1:hover i {
padding-left:15px;
}
/* divides the box in 2 columns */
.ns_btn_style_1_grid {
display: grid;
grid-template-columns: 80% 20%;
align-items: end;
}
.ns_btn_style_1_arrow i {
font-size: 26px;
line-height: 32px;
color: #000;
}
.ns_btn_style_1_subtitle {
margin:0;
font-size: 18px;
font-weight: 500;
line-height: 24px;
color: #000;
}