Create a header with 2×4 sliders. Slider text only on hover. Started from this page as inspiration: <https://dividezigns.com/photographer-web-page/>

• Section with row of 4 columns
• Add slider module
  • Hide arrows & controls
  • Automatic animation of 3000
  • Custom CSS main element: height: 50vh;
  • CSS class: hws_slider
• Add a slide
  • Add a header + button url and background image
  • Background image position/size: default/cover
  • Custom CSS main element: height: 50vh;
• Copy slide and change image
• Copy module 7 times, change images and animation time
• Add following CSS in theme options

> /* — START header home page slides — */

.hws_slider .et_pb_slides .et_pb_slide {
height: 50vh;
}
.hws_slider .et_pb_slides .et_pb_slider_container_inner {
display: none !important;
}
.hws_slider .et_pb_slides:hover .et_pb_slider_container_inner {
display: flex !important;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
background-color: rgba(0,187,227,0.5);
background-size: cover;
width: 116%;
height: 100%;
}
.hws_slider .et_pb_slide_description {
animation-duration: .2s!important;
animation-delay: 0s!important;
}
.hws_slider .et_pb_more_button {
display: none;
}
.hws_slider .et_pb_slide_title {
font-size: 25px !important;
font-weight: bold !important;
}
/* -- END header home page slides -- */
Code language: CSS (css)