.bdt-image-hover-effect-wrap img {
  max-inline-size: 100%;
  block-size: auto;
  /* display: block; */
  object-fit: cover;
  transition: all 0.5s ease;
}
.bdt-image-hover-effect-wrap {
  overflow: hidden;
  position: relative;
}
.bdt-image-hover-effect-wrap::before,
.bdt-image-hover-effect-wrap::after {
  position: absolute;
  content: "";
  transition: all 0.5s ease;
}
/* Example 1: Image Hover Effect with Fade */
.bdt-image-hover-effect-wrap.bdt-image-hover-effect-1::before,
.bdt-image-hover-effect-wrap.bdt-image-hover-effect-1::after {
  z-index: 3;
}
.bdt-image-hover-effect-wrap.bdt-image-hover-effect-1::before {
  inset-block-start: 50%;
  inset-inline-start: 0;
  inset-inline-end: 0;
  inset-block-end: 50%;
}
.bdt-image-hover-effect-wrap.bdt-image-hover-effect-1:hover img {
  transform: scale(1.1);
}
.bdt-image-hover-effect-wrap.bdt-image-hover-effect-1::after {
  inset-block-start: 0;
  inset-inline-start: 50%;
  inset-inline-end: 50%;
  inset-block-end: 0;
}
.bdt-image-hover-effect-wrap.bdt-image-hover-effect-1:hover:before {
  inset-block-start: 0;
  inset-block-end: 0;
}
.bdt-image-hover-effect-wrap.bdt-image-hover-effect-1:hover:after {
  inset-inline-start: 0;
  inset-inline-end: 0;
}
/* Example 2: Image Hover Effect with Rotate */
.bdt-image-hover-effect-wrap.bdt-image-hover-effect-2::after {
  inset-inline-start: 50%;
  opacity: 1;
  padding-block-start: 100%;
  inset-block-start: 50%;
  transform: translate(-50%, -50%) rotate(45deg) scale(0);
  inline-size: 100%;
}
.bdt-image-hover-effect-wrap.bdt-image-hover-effect-2:hover::after {
  opacity: 0;
  transform: translate(-50%, -50%) rotate(45deg) scale(1);
}
.bdt-image-hover-effect-wrap.bdt-image-hover-effect-2:hover img {
  transform: scale(1.1);
}
/* Example 3: Image Hover Effect with Border */
.bdt-image-hover-effect-wrap.bdt-image-hover-effect-3::before,
.bdt-image-hover-effect-wrap.bdt-image-hover-effect-3::after {
  inset-block-end: 20px;
  inset-inline-start: 20px;
  opacity: 0;
  inset-inline-end: 20px;
  inset-block-start: 20px;
  z-index: 1;
  background: unset !important;
}
.bdt-image-hover-effect-wrap.bdt-image-hover-effect-3::before {
  transform: scaleX(0);
  border-block-end: 2px solid;
  border-block-start: 2px solid;
}
.bdt-image-hover-effect-wrap.bdt-image-hover-effect-3:hover img {
  transform: scale(1.1);
}
.bdt-image-hover-effect-wrap.bdt-image-hover-effect-3::after {
  transform: scaleY(0);
  border-inline-start: 2px solid;
  border-inline-end: 2px solid;
}
.bdt-image-hover-effect-wrap.bdt-image-hover-effect-3:hover::before,
.bdt-image-hover-effect-wrap.bdt-image-hover-effect-3:hover::after {
  opacity: 1;
  filter: alpha(opacity=100);
  transform: scale(1);
}
/* Example 4: Image Hover Effect with Slide */
.bdt-image-hover-effect-wrap.bdt-image-hover-effect-4::before {
  inset-block-start: 0;
  inset-inline-start: 50%;
  inline-size: 120%;
  block-size: 100px;
  transition: all 0.6s linear;
  z-index: 1;
  transform: scale3d(1.9, 1.4, 1) rotate3d(0, 0, 1, 45deg) translate(0, -150%);
  backface-visibility: hidden;
  pointer-events: none;
}
.bdt-image-hover-effect-wrap.bdt-image-hover-effect-4:hover img {
  transform: scale(1.1);
}
.bdt-image-hover-effect-wrap.bdt-image-hover-effect-4:hover::before {
  transform: scale3d(1.9, 1.4, 1) rotate3d(0, 0, 1, 45deg) translate(0, 200%);
  inset-inline-start: -100%;
  inset-block-start: 100%;
}
/* Example 5: Image Hover Effect with Border */
.bdt-image-hover-effect-wrap.bdt-image-hover-effect-5::after {
  inset-block-start: 30px;
  inset-inline-end: 50px;
  inset-block-end: 30px;
  inset-inline-start: 50px;
  border-inline-end: 2px solid;
  border-inline-start: 2px solid;
  transform: scale(1, 0);
  transform-origin: 100% 0;
  opacity: 0;
  z-index: 1;
}
.bdt-image-hover-effect-wrap.bdt-image-hover-effect-5:hover img {
  transform: scale(1.1);
}
.bdt-image-hover-effect-wrap.bdt-image-hover-effect-5::before {
  inset-block-start: 50px;
  inset-inline-end: 30px;
  inset-block-end: 50px;
  inset-inline-start: 30px;
  border-block-start: 2px solid;
  border-block-end: 2px solid;
  opacity: 0;
  transform: scale(0, 1);
  transform-origin: 0 0;
  z-index: 1;
}
.bdt-image-hover-effect-wrap.bdt-image-hover-effect-5::after,
.bdt-image-hover-effect-wrap.bdt-image-hover-effect-5::before {
  background: unset !important;
}
.bdt-image-hover-effect-wrap.bdt-image-hover-effect-5:hover::after,
.bdt-image-hover-effect-wrap.bdt-image-hover-effect-5:hover::before {
  opacity: 1;
  transform: scale(1);
}
/* Example 6: Image Hover Effect with Border */
.bdt-image-hover-effect-wrap.bdt-image-hover-effect-6::after {
  inset-block-start: 30px;
  inset-inline-end: 30px;
  inset-block-end: 30px;
  inset-inline-start: 30px;
  border: 1px solid;
  opacity: 0;
  transform: scale(0);
  background: unset !important;
}
.bdt-image-hover-effect-wrap.bdt-image-hover-effect-6:hover img {
  transform: scale(1.1);
}
.bdt-image-hover-effect-wrap.bdt-image-hover-effect-6:hover::after {
  opacity: 1;
  transform: scale(1);
}