So if you follow along in the video, I refer to this blog post for you to enter code at ...
So if you follow along in the video, I refer to this blog post for you to enter code at ...
So if you follow along in the video, I refer to this blog post for you to enter code at ...
So if you follow along in the video, I refer to this blog post for you to enter code at ...
So if you follow along in the video, I refer to this blog post for you to enter code at certain points, so below is everything you will need!
You can download the complete template here
Here are the images I used in this tutorial:
The Following are the css class names I used in the tutorial:
reboot-container
reboot-text
The foloowing code goes into the trigger container in the Custom CSS option:
:root {
--transition: 0.5s;
--circle-color: #000000;
--content-background: #d4030a;
--mobile-height: 650px;
--mob-top: 330px;
--border-R-on-hover:15px;
}
/* Target the container */
.reboot-container {
position: relative;
border-radius: var(--border-R-on-hover);
transition: all var(--transition) !important;
}
/* Container elements transition */
.reboot-container,
.reboot-container .elementor-element,
.reboot-container .elementor-widget-container,
.reboot-container .elementor-widget-image,
.reboot-text {
transition: all var(--transition) !important;
}
/* Circle background */
.reboot-container::before {
content: "";
background: var(--circle-color);
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
border-radius: var(--border-R-on-hover);
clip-path: circle(120px at center);
transition: all var(--transition) !important;
z-index: 1;
}
/* Hover effect for circle */
.reboot-container:hover::before {
clip-path: circle(500px at center);
background: var(--content-background);
}
/* Image positioning */
.reboot-container .elementor-widget-image {
width:180px!important;
}
.reboot-container:hover .elementor-widget-image {
right: 0px !important;
margin-top:0px;
z-index: 2;
}
.reboot-container:hover .elementor-widget-image .elementor-widget-container {
transform: scale(1.7);
}
/* Text visibility */
.reboot-container .reboot-text {
opacity: 0;
visibility: hidden;
z-index: 2;
}
.reboot-container:hover .reboot-text {
opacity: 1;
visibility: visible;
}
.reboot-container:hover .reboot-text.elementor-element {
margin-left: 0px !important;
}
/* Responsive styles */
@media (max-width: 767px) {
.reboot-container {
height: var(--mobile-height);
}
/*mobile image settings*/
.reboot-container .elementor-widget-image .elementor-widget-container {
transform: scale(1);
position:relative;
right:0px;
top:-10px;
}
.reboot-container:hover .elementor-widget-image .elementor-widget-container {
transform: scale(0.7);
margin-top:5px;
right:71px;
position:relative;
}
.reboot-container:hover .elementor-widget-image {
top: var(--mob-top) !important;
}
/*mobile text settings*/
.reboot-container .reboot-text {
position:relative!important;
opacity: 0;
visibility: hidden;
margin-top:10%!important;
z-index: 2;
left:-10px!important;
}
.reboot-container:hover .coke-text.elementor-element {
margin-top: 115px !important;
left:-50px!important;
}
}