baguetteBox实现自带图片搜索的灯箱lightbox图片放大幻灯效果代码-html代码-BFW代码库

baguetteBox实现自带图片搜索的灯箱lightbox图片放大幻灯效果代码

代码语言：html

代码描述：baguetteBox实现自带图片搜索的灯箱lightbox图片放大幻灯效果代码

代码标签： baguetteBox 自带图片搜索灯箱l ightbox 图片放大幻灯

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开


<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">
  
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/baguetteBox.min.css">
  
<style>
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: Raleway;
}

body {
  background: #dcd9cd;
}

.input-container {
  display: flex;
  justify-content: center;
  padding-top: 40px;
  padding-bottom: 40px;
}

input {
  width: 450px;
  border: 2px solid rgb(207, 207, 207);
  border-radius: 6px;
  height: 50px;
  padding-left: 10px;
}

input::placeholder {
  font-size: 16px;
}

input:focus {
  outline-color: rgb(124, 176, 236);
}

.gallery_title {
  text-align: center;
  padding-bottom: 1rem;
}

.gallery {
  box-shadow: 0 0.1rem 0 0 rgba(0, 0, 0, 0.1);
  margin: 0 auto;
  display: grid;
  max-width: 780px;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-auto-rows: 180px;
  grid-gap: 20px;
  padding-bottom: 70px;
}

.gallery .item {
  max-width: 180px;
  height: 180px;
  margin: 0 auto;
  cursor: pointer;
  filter: grayscale(40%);
  
}

.gallery .item:hover {
  filter: none;
  transition: 0.3s ease-out;
  transform: scale(1.06);
}

img {
  max-width: 180px;
  height: 70%;
  box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 10px 0px, rgba(0, 0, 0, 0.5) 0px 2px 15px 0px;
}
</style>



</head>

<body >
  <main>
  <div class="input-container">
    <input type="text" placeholder='Search' id='input'>
  </div>

  <div class="gallery_title">
    <h1>Design Collections</h1>
  </div>

  <article class='gallery'>
    <a href="//repo.bfw.wiki/bfwrepo/image/5e62eef0d452a.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_400,h_300,/quality,q_90" data-caption='The great thing about reaching the top of the mountain is realising that there’s space for more than one person. And you’re now in the prime position to help others up.' class='item' title='Hay Bales'>
      <img src="//repo.bfw.wiki/bfwrepo/image/5e62eef0d452a.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_400,h_300,/quality,q_90" alt="first image">
    </a>
    <a href="//repo.bfw.wiki/bfwrepo/image/5e62ef20b92ee.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_400,h_300,/quality,q_90" data-caption='A lake is a landscape’s most beautiful and expressive feature. It is Earth’s eye; looking into which the beholder measures the depth of his own nature.' class='item' title='Lake'>
      <img src="//repo.bfw.wiki/bfwrepo/image/5e62ef20b92ee.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_400,h_300,/quality,q_90" alt="second image">
    </a>
    <a href="//repo.bfw.wiki/bfwrepo/image/5e62ef41353c3.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_400,h_300,/quality,q_90" data-caption='The human desire to obtain more is a sieve that can never be filled with all the water from the world’s oceans' title='Canyon' class='item'>
      <img src="//repo.bfw.wiki/bfwrepo/image/5e62ef41353c3.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_400,h_300,/quality,q_90" alt="third image">
    </a>
    <a href="//repo.bfw.wiki/bfwrepo/image/5e62ef60656fd.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_400,h_300,/qualit.........完整代码请登录后点击上方下载按钮下载查看