ວິທີສ້າງເອັບເຟັກ Lightbox ງາມໆ ເວລາ Hover ຮູບພາບດ້ວຍ CSS3

ບົດນຳ: ເພີ່ມຄວາມໜ້າສົນໃຈໃຫ້ຮູບພາບດ້ວຍເອັບເຟັກ Hover Lightbox

ໃນການອອກແບບເວັບໄຊ, ການສ້າງປະສົບການທີ່ດີໃຫ້ກັບຜູ້ເຂົ້າຊົມ (User Experience) ແມ່ນສິ່ງສຳຄັນຫຼາຍ. ໜຶ່ງໃນເຕັກນິກທີ່ນິຍົມໃຊ້ເພື່ອເພີ່ມຄວາມດຶງດູດ ແລະ ເຮັດໃຫ້ເວັບໄຊເບິ່ງມີຊີວິດຊີວາຄືການເພີ່ມລູກຫຼິ້ນໃຫ້ກັບຮູບພາບ ເຊັ່ນ: ເວລາທີ່ເຮົາເອົາເມົາໄປຊີ້ (Hover) ໃສ່ຮູບພາບ ແລ້ວມີແຜ່ນປ້າຍສີມືດໆ ຫຼື ສີງາມໆ ພ້ອມກັບຂໍ້ຄວາມປະກົດຂຶ້ນມາ ເຊິ່ງເຮົາມັກເອີ້ນລັກສະນະນີ້ວ່າ "ເອັບເຟັກ Lightbox" ຫຼື "Overlay Hover".

ຫຼາຍຄົນອາດຈະຄິດວ່າການສ້າງເອັບເຟັກແບບນີ້ຕ້ອງໃຊ້ JavaScript ທີ່ຫຍຸ້ງຍາກ, ແຕ່ຄວາມຈິງແລ້ວ ໃນປັດຈຸບັນເຮົາສາມາດໃຊ້ພຽງແຕ່ CSS3 ກໍສາມາດສ້າງເອັບເຟັກ Lightbox ທີ່ງົດງາມ ແລະ ເຮັດວຽກໄດ້ຢ່າງລ່ຽນໄຫຼ. ມື້ນີ້ເຮົາຈະມາເບິ່ງວິທີການສ້າງໄປເທື່ອລະຂັ້ນຕອນແບບງ່າຍໆ ທີ່ທ່ານສາມາດນຳໄປປັບໃຊ້ກັບເວັບໄຊຂອງທ່ານໄດ້ທັນທີ.

1. ກຽມໂຄງສ້າງ HTML ສຳລັບກ່ອງຮູບພາບ

ຂັ້ນຕອນທຳອິດແມ່ນການສ້າງໂຄງສ້າງພື້ນຖານດ້ວຍ HTML. ເຮົາຈະສ້າງກ່ອງຫຼັກ (Container) ໜຶ່ງກ່ອງ ເພື່ອກວມເອົາຮູບພາບ ແລະ ກ່ອງຂໍ້ຄວາມທີ່ຈະໃຫ້ສະແດງຂຶ້ນມາເວລາ Hover.

<div class="image-container">
  <img src="your-image.jpg" alt="ຮູບພາບຕົວຢ່າງ" class="image">
  <div class="overlay">
    <div class="text">ເບິ່ງລາຍລະອຽດ</div>
  </div>
</div>

ອະທິບາຍໂຄດ:

• .image-container ແມ່ນກ່ອງຫຼັກທີ່ໃຊ້ກວມເອົາທຸກອົງປະກອບ.
• .image ແມ່ນຮູບພາບທີ່ເຮົາຕ້ອງການສະແດງໃນໜ້າເວັບ.
• .overlay ແມ່ນຊັ້ນສີທີ່ຈະປົກຄຸມຮູບພາບ ພ້ອມກັບມີຂໍ້ຄວາມ .text ທີ່ຈະປະກົດຂຶ້ນມາ.

2. ຈັດຮູບແບບພື້ນຖານດ້ວຍ CSS

ຕໍ່ມາ, ເຮົາຈະໃຊ້ CSS ເພື່ອຈັດການຮູບແບບຂອງກ່ອງ ແລະ ຮູບພາບໃຫ້ພໍດີກັນ. ສິ່ງສຳຄັນແມ່ນການກຳນົດໃຫ້ກ່ອງຫຼັກເປັນ position: relative; ເພື່ອໃຫ້ກ່ອງ Overlay ສາມາດຊ້ອນທັບເທິງຮູບພາບໄດ້ແບບພໍດີ.

.image-container {
  position: relative;
  width: 100%;
  max-width: 400px; /* ກຳນົດຂະໜາດໃຫຍ່ສຸດຂອງກ່ອງຮູບພາບ */
  overflow: hidden; /* ເຊື່ອງສ່ວນທີ່ລົ້ນອອກມາເພື່ອຄວາມຈົບງາມ */
  border-radius: 10px; /* ເຮັດໃຫ້ຂອບຂອງຮູບພາບມົນ */
  cursor: pointer;
}

.image {
  display: block;
  width: 100%;
  height: auto;
  transition: transform 0.5s ease; /* ເພີ່ມຄວາມນຸ້ມນວນເວລາຮູບຂະຫຍາຍ */
}

3. ສ້າງເອັບເຟັກ Lightbox ດ້ວຍ CSS3 Hover

ມາກ້າວເຂົ້າສູ່ຂັ້ນຕອນສຳຄັນ! ເຮົາຈະຂຽນ CSS ໃຫ້ກ່ອງ .overlay ເຊື່ອງຕົວໄວ້ກ່ອນ (ໂດຍໃຊ້ opacity: 0) ແລະ ຈະໃຫ້ມັນປະກົດຂຶ້ນມາ (ປ່ຽນເປັນ opacity: 1) ກໍຕໍ່ເມື່ອມີການເອົາເມົາໄປຊີ້ທີ່ກ່ອງຫຼັກ (:hover).

/* ອອກແບບກ່ອງ Overlay ທີ່ຊ້ອນທັບ */
.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: opacity 0.4s ease;
  background-color: rgba(0, 0, 0, 0.7); /* ສີພື້ນຫຼັງສີດຳໂປ່ງໃສ 70% */
  display: flex; /* ໃຊ້ flexbox ເພື່ອຈັດຂໍ້ຄວາມໃຫ້ຢູ່ເຄິ່ງກາງ */
  align-items: center;
  justify-content: center;
}

/* ເມື່ອເອົາເມົາຊີ້ (Hover) ໃຫ້ສະແດງ Overlay ໂຕນີ້ຂຶ້ນມາ */
.image-container:hover .overlay {
  opacity: 1;
}

/* ອອກແບບຂໍ້ຄວາມທາງໃນ */
.text {
  color: white;
  font-size: 20px;
  font-weight: bold;
  text-align: center;
  transform: translateY(20px); /* ໃຫ້ຂໍ້ຄວາມເລື່ອນລົງໜ້ອຍໜຶ່ງກ່ອນແລ້ວຈຶ່ງເດັ້ງຂຶ້ນ */
  transition: transform 0.4s ease;
}

/* ເຮັດໃຫ້ຂໍ້ຄວາມເລື່ອນຂຶ້ນມາແບບນຸ້ມນວນເວລາ Hover */
.image-container:hover .text {
  transform: translateY(0);
}

/* ລູກຫຼິ້ນເພີ່ມເຕີມ: ໃຫ້ຮູບພາບຂະຫຍາຍໃຫຍ່ຂຶ້ນໜ້ອຍໜຶ່ງເວລາ Hover */
.image-container:hover .image {
  transform: scale(1.1);
}

4. ນຳໄປປັບໃຊ້ກັບສ່ວນໃດຂອງເວັບໄຊໄດ້ແດ່?

ເອັບເຟັກ Lightbox Hover ແບບນີ້ແມ່ນເໝາະຫຼາຍສຳລັບການນຳໄປໃຊ້ໃນສ່ວນຕ່າງໆ ຂອງເວັບໄຊ ເພື່ອເພີ່ມຄວາມເປັນມືອາຊີບ ເຊັ່ນ:

• ໜ້າສະແດງຜົນງານ (Portfolio): ເພື່ອໃຫ້ລູກຄ້າເຫັນຊື່ໂປຣເຈັກ ຫຼື ລາຍລະອຽດຫຍໍ້ ເວລາຊີ້ໃສ່ຮູບ.
• ໜ້າສິນຄ້າ (Product Gallery): ເພື່ອສະແດງປຸ່ມ "ເບິ່ງລາຍລະອຽດ" ຫຼື "ສັ່ງຊື້" ເທິງຮູບສິນຄ້າ.
• ໜ້າແນະນຳທີມງານ (Our Team): ສະແດງຊື່ ແລະ ຕຳແໜ່ງຂອງພະນັກງານເວລາ Hover ໃສ່ຮູບໂປຣໄຟລ໌.

ສະຫຼຸບ

ພຽງແຕ່ໃຊ້ HTML ແລະ CSS3 ງ່າຍໆ ຕາມ 4 ຂັ້ນຕອນຂ້າງເທິງນີ້, ທ່ານກໍສາມາດສ້າງເອັບເຟັກ Lightbox ເວລາ Hover ທີ່ສວຍງາມ ເຊິ່ງຊ່ວຍຍົກລະດັບໃຫ້ເວັບໄຊຂອງທ່ານເບິ່ງທັນສະໄໝ ແລະ ດຶງດູດສາຍຕາຜູ້ໃຊ້ງານໄດ້ຫຼາຍຂຶ້ນແລ້ວ. ຢ່າລືມລອງນຳໂຄດເຫຼົ່ານີ້ໄປທົດລອງປັບປ່ຽນສີ ຫຼື ລູກຫຼິ້ນອື່ນໆ ໃຫ້ເຂົ້າກັບເອກະລັກຂອງທຸລະກິດທ່ານເບິ່ງເດີ້.

ແຕ່ຖ້າຫາກທ່ານເປັນເຈົ້າຂອງທຸລະກິດທີ່ອາດຈະບໍ່ມີເວລາຂຽນໂຄດເອງ ແຕ່ຢາກໄດ້ເວັບໄຊທີ່ມີລູກຫຼິ້ນສວຍງາມ, ທັນສະໄໝ ແລະ ພ້ອມໃຊ້ງານໄດ້ທັນທີ, ສາມາດເຂົ້າໄປເລືອກເບິ່ງ Template ເວັບໄຊສຳເລັດຮູບງາມໆ ທີ່ອອກແບບມາເພື່ອທຸລະກິດລາວໄດ້ທີ່ laotemplate.com. ພວກເຮົາມີ Template ທີ່ລວມເອົາເອັບເຟັກທີ່ທັນສະໄໝໄວ້ໃຫ້ທ່ານແລ້ວ ພ້ອມໃຫ້ທ່ານນຳໄປສ້າງຍອດຂາຍບົນໂລກອອນລາຍໄດ້ຢ່າງມືອາຊີບ!