Menu
Creator
Date
Elevate your design with eye-catching hover effects that add a touch of interactivity without the need for complex code.
To get started, copy the Elementor field and paste on the site you would like to implement. Next Copy and paste the provided CSS code for the desired hover effect. Double-check the CSS code and make adjustments if needed (e.g., colors, duration).
/* ------- Change these for the images ------- */
.main-container-slide:has(.slide1:hover){
background-image: url(https://pepper.benova.com.my/wp-content/uploads/2023/09/banner-1.jpg) !important;
}
.main-container-slide:has(.slide2:hover){
background-image: url(https://pepper.benova.com.my/wp-content/uploads/2023/09/banner-2.jpg) !important;
}
/* ------- Feel free to change it based on your design ------- */
.main-container-slide{
padding: 0 100px;
color: #fff;
}
.main-container-slide::after{
content: '';
position: absolute;
display: block;
width: 100%;
height: 100%;
left: 0;
top: 0;
background: #3a3839;
opacity: .3;
}
.main-container-slide .dual-cta{
display: block;
position: relative;
padding: 50px 56px;
max-height: 625px;
border-left: 1px solid #fff;
width: 100%;
height: 500px;
color: #fff !important;
}
.main-container-slide .title-column{
margin-top: 50px;
font-size: 18px;
letter-spacing: normal;
}
.main-container-slide a{
color: #fff;
}
.cta-column{
z-index: 1
}
.cta-column h2{
font-weight: 500;
letter-spacing: normal;
color: #fff;
}
.cta-description{
position: absolute;
bottom: 50px;
align-content: center;
transition: opacity .3s ease 0s;
opacity: 0;
width: 60%;
}
.dual-cta p{
margin-bottom: 0;
}
.main-container-slide .dual-cta:hover .cta-description{
opacity: 1;
}
.btn-cta{
position: absolute;
bottom: 50px;
right: 56px;
height: 60px;
width: 60px;
border: 1px solid #fff;
border-radius: 100%;
-webkit-transition: background-color .3s ease 0s;
-moz-transition: background-color .3s ease 0s;
-o-background-size: background-color .3s ease 0s;
transition: background-color .3s ease 0s;
}
.btn-cta .ti-arrow-top-right{
font-size: 20px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: #fff;
}
.main-container-slide .dual-cta:hover .btn-cta{
background-color: #fff;
}
.main-container-slide .dual-cta:hover .btn-cta .ti-arrow-top-right{
color: #000;
}
/* ------- Mobile Responsive ------- */
@media only screen and (max-width: 1200px){
.main-container-slide{
padding: 0 50px;
}
.main-container-slide .dual-cta{
padding: 40px 46px;
height: 400px;
}
}
@media only screen and (max-width: 1000px){
.main-container-slide .slide1:after{
display: none;
}
.main-container-slide .dual-cta:after{
content: '';
height: 1px;
width: 100vw;
background-color: #fff;
position: absolute;
top: -8%;
left: 50%;
transform: translateX(-50%);
}
.btn-cta{
position: relative;
bottom:unset;
right: unset;
}
.cta-description{
position: relative;
bottom: unset;
width: 100%;
margin-bottom: 20px!important;
}
}
@media only screen and (max-width: 768px){
.main-container-slide .dual-cta{
border-left: none;
}
.cta-column{
padding: 0!important;
}
.cta-description{
opacity: 1;
}
.main-container-slide .dual-cta{
height: auto;
margin-bottom: 50px;
}
.main-container-slide .title-column{
margin-bottom: 50px !important;
}
}
