Hover Boxes Using ACF/Posts

Using ACF Repeaters

I am Box #1

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.

And I am Box #2

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.

You can call me Box #3

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

I'm Box #4 and I have multiple lines

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.

While I'm Box #5 and I have even more lines

Lorem Ipsum is simply dummy text of the printing and typesetting industry.

And I'm Box #6 with the most number of lines available, I think?

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting.

Last but not the least, I'm Box #7

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it.

Using ACF Repeaters - Carousel

function.php

//----------------------------------//

// slider enqueue script//

function enqueue_slick_scripts() {

wp_enqueue_script( 'jquery' );

wp_enqueue_script( 'slick-script', 'https://cdn.jsdelivr.net/jquery.slick/1.6.0/slick.min.js', array( 'jquery' ), '1.6.0', true );

wp_enqueue_style( 'slick-style', 'https://cdn.jsdelivr.net/jquery.slick/1.6.0/slick.css', array(), '1.6.0', 'all' );

}

add_action( 'wp_enqueue_scripts', 'enqueue_slick_scripts' );

//----------------------------------//

function initialize_slick_slider() {

echo "<script>

jQuery(document).ready(function($) {

function adjustCarousel() {

var screenWidth = $(window).width();

var slidesToShow = 4; // Default 3 columns

if (screenWidth < 1400) {

slidesToShow = 3; // Two columns for medium screens

}

if (screenWidth < 1150) {

slidesToShow = 2; // Two columns for medium screens

}

if (screenWidth < 768) {

slidesToShow = 1; // One column for smaller screens

}

$('.slick-carousel').slick('slickSetOption', 'slidesToShow', slidesToShow);

}

$(window).on('load resize', adjustCarousel);

$('.slick-carousel').slick({

dots: false, // Set to true to show dots navigation

arrows: true, // Set to true to show arrow navigation

infinite: true,

autoplay: false, // Set to true to enable auto-play

autoplaySpeed: 2000, // Adjust the auto-play speed (in milliseconds)

slidesToShow: 3, // Adjust the number of slides to show at a time

slidesToScroll: 1

});

</script>";

}

add_action( 'wp_footer', 'initialize_slick_slider' );

css

/*Slider*/

/* ############### ACF ############### */

:root {

--acf-title-height: 45px;

/*Set to the tallest title height available */

--acf-box-size: 380px;

}

.hoverbox-acf-carousel .box-container {

/*display: flex;*/

/*flex-wrap: wrap;*/

/*justify-content: center;*/

}

.hoverbox-acf-carousel .box-wrapper * {

transition: all 0.8s ease-in-out;

}

.hoverbox-acf-carousel .box-wrapper {

/*flex: 0 0 20%;*/

margin: 10px;

height: var(--acf-box-size);

width: var(--acf-box-size);

position: relative;

overflow: hidden;

}

.hoverbox-acf-carousel .box-wrapper img {

height: 100%;

width: 100%;

object-fit: cover;

}

.hoverbox-acf-carousel .box-content {

height: 100%;

width: 100%;

display: flex;

flex-direction: column;

justify-content: flex-end;

}

.hoverbox-acf-carousel .box-content::before {

content: '';

/*background: rgba(255, 255, 255, 0.50);*/

position: absolute;

width: 100%;

height: 100%;

}

.hoverbox-acf-carousel .box-top {

position: absolute;

bottom: var(--acf-title-height);

height: fit-content;

color: white;

display: flex;

flex-direction: column;

justify-content: flex-start;

}

/*Misc. */

.hoverbox-acf-carousel .box-content-title,

.hoverbox-acf-carousel .box-content-desc {

padding: 0 10px;

}

.hoverbox-acf-carousel .box-content-title h6 {

color: #fff !important;

font-size: 20px;

font-weight: 700;

text-transform: uppercase;

}

.hoverbox-acf-carousel .box-content-title {

height: var(--acf-title-height);

background: linear-gradient(0deg, rgba(0,0,0,0.75) 0%, rgba(255, 255, 255, 0) 100%);

display: flex;

flex-direction: column;

justify-content: flex-end;

}

/* Arrow navigation */

.hoverbox-acf-carousel .box-container {

position: relative;

}

.hoverbox-acf-carousel button.slick-next.slick-arrow {

position: absolute;

right: 12px;

top: 50%;

z-index: 1;

}

.hoverbox-acf-carousel button.slick-prev.slick-arrow {

position: absolute;

left: 12px;

top: 50%;

z-index: 1;

}

.hoverbox-acf-carousel button.slick-next.slick-arrow{

font-size: 0;

line-height: 0;

color: #662F8B;

width: 40px;

height: 40px;

clip-path: polygon(46% 0, 100% 50%, 46% 100%, 31% 81%, 66% 50%, 30% 18%);

}

.hoverbox-acf-carousel button.slick-prev.slick-arrow{

font-size: 0;

line-height: 0;

color: #662F8B;

width: 40px;

height: 40px;

clip-path: polygon(46% 0, 0 50%, 46% 100%, 60% 85%, 25% 50%, 60% 12%);

}

.hoverbox-acf-carousel button.slick-arrow:hover {

background-color: #662F8B !important;

}

.hoverbox-acf-carousel .box-content-desc {

margin-bottom: -100%;

background: rgba(0,0,0,0.75);

}

/*Hover */

.hoverbox-acf-carousel .box-wrapper:hover {

background-size: 105%;

}

.hoverbox-acf-carousel .box-wrapper:hover .box-content-desc {

margin-bottom: calc(0px - var(--acf-title-height));

}

@media only screen and (max-width: 992px) {

.hoverbox-acf-carousel .box-wrapper {

flex: 0 0 45%;

}

@media only screen and (max-width: 670px) {

.hoverbox-acf-carousel .box-wrapper {

flex: 1 0 100%;

}

I am Box #1

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.

And I am Box #2

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.

You can call me Box #3

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

I'm Box #4 and I have multiple lines

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.

While I'm Box #5 and I have even more lines

Lorem Ipsum is simply dummy text of the printing and typesetting industry.

And I'm Box #6 with the most number of lines available, I think?

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting.

Last but not the least, I'm Box #7

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it.