点击放大这些缩略图的最佳方法是什么？图片目前没有链接

Question

我正在努力使我的网络投资组合尽可能方便用户使用。这是我的第一层设计。我想弄清楚扩大这些缩略图的最佳方法是什么。我仍然希望能够按照我目前设置它们的方式对图像进行排序。有什么建议？目前他们只是图像，而不是链接。

这是指向我的投资组合页面的链接：http://www.margierodrigues.com/Portfolio/portfolio.html

任何以这些缩略图为中心的帮助都将受到赞赏。我希望他们总是居中，即使它只分成1-2张图像。

$(function() {
  
  $('#campaign').click(function() {
    showHide('campaign');
    toggleSelected(this);
  });
  $('#print').click(function() {
    showHide('print');
    toggleSelected(this);
  });
  $('#webinteractive').click(function() {
    showHide('webinteractive');
    toggleSelected(this);
  });
  $('#imaging').click(function() {
    showHide('imaging');
    toggleSelected(this);
  });
  $('#photography').click(function() {
    showHide('photography');
    toggleSelected(this);
  });
  $('#motionvideo').click(function() {
    showHide('motionvideo');
    toggleSelected(this);
  });

  $('#all').click(function() {
    showAll();
    toggleSelected(this);
  });

  showHide = function(target) {
    $('#contacts li').each(function() {
      if ($(this).hasClass(target)) {
        $(this).show('slow');
      } else {
        $(this).hide('slow');
      }
    });
  }

  showAll = function() {
    $('#contacts li').each(function() {
      $(this).show('slow');
    });
  }

  toggleSelected= function(me) {
    $('div#filters ul li a').each(function() {
      $(this).removeClass();
    });
    $(me).addClass('selected');
  }
});
	

	

#logo {
  font-family: 'scriptina';
  text-align: center;
  font-size: 75px;
  line-height: 20px;
  background: #ffffff;
  height: 100px;
  margin-top: 5px;
}

#container {
  position: relative;
  margin-left: auto;
  margin-right: auto;
}

#nav {
  font-family: 'champagne';
  width: 80%;
  height: 150px;
  margin-left: auto;
  margin-right: auto;
  display: block;
  padding-top: 100px;
  text-align: center;
  color: #ccf9de;
  letter-spacing: 20px;
}

#nav a {
  color: #484848;
  letter-spacing: 5px;
}

#name {
  font-family: 'biloxi';
  text-align: center;
  font-size: 100px;
  width: 100%;
  padding-top: 80px;
  color: #dfdfdf;
}

#description {
  font-family: 'champagne';
  text-align: center;
  font-size: 20px;
  width: 100%;
  color: #dfdfdf;
}

#content {
  position: relative;
  margin-top: -120px;
  margin-left: auto;
  margin-right: auto;
  width: 640px;
  height: 480px;
  background: #ffffff;
  -webkit-border-radius: 20px;
  -mox-border-radius: 20px;
  border-radius: 20px;
}

#content img {
  float: left;
  padding: 9px;
}

#content p {
  font-family: 'century gothic';
  font-size: 16px;
  padding: 15px;
  text-align: justify;
  line-height: 25px;
}

#resume img {
  position: relative;
  margin: auto;
}

p#caption {
  padding: 0px;
  font-size: 12px;
  line-height: 12px;
}

#portfoliocategories li {
  font-family: 'champagne';
}

#footer {
  text-align: center;
  font-family: 'champagne';
  font-size: 10px;
  height: 3em;
  margin: 90px 0px 0px;
  position: relative;
  width: 100%;
  z-index: -100;
}

@font-face {
  font-family: 'scriptina';
  src: url('../fonts/Scriptina Pro.otf');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'champagne';
  src: url('../fonts/Champagne & Limousines.ttf');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'biloxi';
  src: url('../fonts/Biloxi Script.ttf');
  font-weight: normal;
  font-style: normal;
}

h3 {
  text-align: center;
  font-weight: normal;
  font-family: 'century gothic';
  font-size: 12px;
}

#buttons img {
  display: block;
  padding: 9px;
  position: relative;
  margin-left: 6px;
  margin-top: 127px;
}

#thumbs {
  display: inline-block;
  margin-right: 70px;
  margin-left: 70px;
}

#thumbs li {
  margin: 10px;
  padding: 7px;
  float: left;
  border: solid 1px #ccc;
  list-style: none;
}

img#lr {
  display: block;
  position: absolute;
}

img#back {
  position: absolute;
  top: 150px;
  left: -60px;
  z-index: 50;
  cursor: pointer;
}

img#next {
  position: absolute;
  top: 150px;
  left: 630px;
  z-index: 100;
  cursor: pointer;
}

div#msg {
  position: absolute;
  margin: 275px 25px 0;
  padding: 10px;
  width: 565px;
  height: 40px;
  color: #fff;
  font-size: 20px;
  background: #000;
  background: rgba(0, 0, 0, 0.75);
  border: solid 1px #fff;
}

#close {
  display: block;
  width: 14px;
  margin-left: 439px;
  margin-top: -15px;
  cursor: pointer;
}

#thumbs {
  float: left;
  position: absolute;
  top: 365px;
  width: 600px;
  margin-left: 70px;
  padding: 0px;
}

#thumbs li {
  display: inline-block;
  list-style: none outside none;
  margin: 0 12px 0 0;
}

#thumbs li img:hover {
  cursor: pointer;
}

#thumbs img {
  padding: 0px;
}

#filters {
  text-align: center;
  padding: 30px;
  font-family: "century gothic";
}

a:link {
  color: #000000;
  text-decoration: none;
}

a:visited {
  color: #000000;
  text-decoration: none;
}

a:hover {
  color: #666;
  text-decoration: none;
}

a:active {
  color: #666;
  text-decoration: none;
}

#resources {
  margin-left: 45px;
  margin-top: -15px;
}

#resources li {
  display: inline-block;
  list-style: none outside none;
  margin: 0 10px 0 0;
}

#filters li {
  display: inline-block;
  list-style: none outside none;
  margin: 0 11px 0 0;
}

.selected {
  border: none 0px #fff;
  -webkit-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
  -moz-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
  -webkit-border-radius: 20px;
  -mox-border-radius: 20px;
  border-radius: 20px;
}

<div id="logo">
  <a href="index.html"><img src="assets/logo.gif" alt="logo">
</div>

<div id="nav">
  <a href="portfolio.html">PORTFOLIO</a> |

  <a href="about.html">RESUME</a> |

  <a href="contact.html">CONTACT</a>
</div>


<div id="portfoliocategories">
  <header>
    <div id="filters">
      <ul>
        <li><a href="#" id="all">All</a>
        </li>
        <li><a href="#" id="campaign">Campaign</a>
        </li>
        <li><a href="#" id="print">Print</a>
        </li>
        <li><a href="#" id="webinteractive">Web/Interactive</a>
        </li>
        <li><a href="#" id="imaging">Imaging</a>
        </li>
        <li><a href="#" id="photography">Photography</a>
        </li>
        <li><a href="#" id="motionvideo">Motion/Video</a>
        </li>
      </ul>
    </div>
  </header>
  <div id="thumbs">
    <ul>
      <li class="campaign 1"> <img src="assets/images/thumbnails/campaign_1.jpg" alt="campaign">
      </li>
      <li class="campaign 2"> <img src="assets/images/thumbnails/campaign_2.jpg" alt="campaign">
      </li>
      <li class="campaign 3"> <img src="assets/images/thumbnails/campaign_3.jpg" alt="campaign">
      </li>

      <li class="imaging 1"> <img src="assets/images/thumbnails/imaging_1.jpg" alt="imaging">
      </li>
      <li class="imaging 2"> <img src="assets/images/thumbnails/imaging_2.jpg" alt="imaging">
      </li>
      <li class="imaging 3"> <img src="assets/images/thumbnails/imaging_3.jpg" alt="imaging">
      </li>
      <li class="imaging 4"> <img src="assets/images/thumbnails/imaging_4.jpg" alt="imaging">
      </li>
      <li class="imaging 5"> <img src="assets/images/thumbnails/imaging_5.jpg" alt="imaging">
      </li>
      <li class="imaging 6"> <img src="assets/images/thumbnails/imaging_6.jpg" alt="imaging">
      </li>
      <li class="imaging 7"> <img src="assets/images/thumbnails/imaging_7.jpg" alt="imaging">
      </li>
      <li class="imaging 8"> <img src="assets/images/thumbnails/imaging_8.jpg" alt="imaging">
      </li>


      <li class="photography 1"> <img src="assets/images/thumbnails/photo_1.jpg" alt="photo">
      </li>
      <li class="photography 2"> <img src="assets/images/thumbnails/photo_2.jpg" alt="photo">
      </li>

      <li class="print 1"> <img src="assets/images/thumbnails/print_1.jpg" alt="print">
      </li>
      <li class="print 2"> <img src="assets/images/thumbnails/print_2.jpg" alt="print">
      </li>
      <li class="print 3"> <img src="assets/images/thumbnails/print_3.jpg" alt="print">
      </li>
      <li class="print 4"> <img src="assets/images/thumbnails/print_4.jpg" alt="print">
      </li>
      <li class="print 5"> <img src="assets/images/thumbnails/print_5.jpg" alt="print">
      </li>
      <li class="print 6"> <img src="assets/images/thumbnails/print_6.jpg" alt="print">
      </li>

      <li class="webinteractive 1"> <img src="assets/images/thumbnails/web_1.jpg" alt="web">
      </li>
      <li class="webinteractive 2"> <img src="assets/images/thumbnails/web_2.jpg" alt="web">
      </li>
      <li class="webinteractive 3"> <img src="assets/images/thumbnails/web_3.jpg" alt="web">
      </li>

      <li class="motionvideo 1"> <img src="assets/images/thumbnails/motion_1.jpg" alt="web">
      </li>

    </ul>
  </div>




</div>

<div id="footer">
  &copy; MargieRodrigues, 2014
</div>	

Answer 1

要触发css中的点击事件，您应该执行以下操作：将图片封装在<a>

中

<li class="campaign 1">  
    <a href="#ImgToDisplay">
        <img src="assets/images/thumbnails/campaign_1.jpg" alt="campaign"></a>
</li>

默认情况下将ImgToDisplay设置为隐藏，并在css中添加以下内容：

ImgToDisplay:target
{
  //set your image to visible here.
}

此外，在悬停时放大ImgToDisplay，只需：

ImgToDisplay:active
{
   //enlarge your image here like below
    position: relative; z-index: 999; 
    -o-transform: scale(1.03,1.03); 
    -ms-transform: scale(1.03,1.03); 
    -moz-transform: scale(1.03,1.03); 
    -webkit-transform: scale(1.03,1.03); 
    transform: scale(1.03,1.03);
}

Answer 2

所以我是新手所以请原谅我，如果这最终没有帮助。

https://css-tricks.com/snippets/css/scale-on-hover-with-webkit-transition/ https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_transitions

我调查了这个，以上是我的参考资料。随意玩这个，我希望它有所帮助，它适用于我的测试。

#thumbs li img:hover {
   transition: all .2s ease-in-out;
   transform: scale(1.1);
}