悬停时的缩略图标题并在加载缩略图之前使用加载程序显示占位符

Question

我试图创造两件事：

1. 在悬停时显示缩略图标题（淡入/淡出），带有 css，水平和垂直对齐。
2. 在加载缩略图之前显示一个占位符（相同大小的缩略图）和加载程序（圆圈#aaa 颜色）。示例中的占位符颜色为#eee (lightgrey)

在小提琴的例子中，我给元素一些明亮的颜色，这样你就可以看到结构，蓝色、橙色、红色。浅灰色是我想用作占位符的颜色，标题应该在顶部。

第一个缩略图显示了我想要实现的操作，只是悬停时没有透明标题。

因为我使用的是假图像，它现在加载速度很快，但是当使用真实图像时，我想创建一个加载器，当缩略图完全加载时会淡出（所以缩略图加载在加载器下，加载器在顶部）我没有添加加载器在 html 代码中。

我希望有人了解我想要实现的目标并可以帮助我，对于代码专家来说一定很容易。

Fiddle

.caption {
position: absolute;
display: block;
top: 0;
left: 0;
width: 100%;
height: 100%;
font-size: 20px;
text-align: center;
vertical-align: middle;
opacity: 0;
visibility: hidden;
background-color: red; /*for test red*/
}

.thumb:hover .caption {
opacity: 1;
visibility: visible;
}

.loader {
position: absolute;
background-color: #aaa;
width: 18px;
height: 18px;
top: 50%;
left: 50%;
margin-top: -9px;
margin-left: -9px;
-moz-border-radius: 9px;
-webkit-border-radius: 9px;
border-radius: 9px;
z-index: 999; 
}

Answer 1

这是你想要达到的目标吗？

http://jsfiddle.net/a0zwecou/4/

html, body {
  margin: 0;
  padding: 0;
}

body {
  font-family: helvetica, arial, sans-serif;
  font-weight: normal;
  font-size: 14px;
  line-height: 18px;
  color: #111;
  overflow-y: scroll;
  -webkit-font-smoothing: antialiased;
  -moz-font-smoothing: antialiased;
  font-smoothing: antialiased; 
}

a {
  color: #111;
  text-decoration: underline;
}

a:visited {
  text-decoration: underline;
}

a:hover {
  text-decoration: none;
}

:hover {
  -webkit-transition: all 0.3s ease;
     -moz-transition: all 0.3s ease;
      -ms-transition: all 0.3s ease;
       -o-transition: all 0.3s ease;
          transition: all 0.3s ease;
}

/************************************************
Columns grid - Thumbnails
************************************************/

#content {
  position: relative;
  display: inline-block;
  margin: 0 40px 100px 40px;
  background-color: orange; /*for test orange*/
  padding: 10px;
}

.col-25 {
  position: relative;
  float: left;
  width: 25%;
}

.thumb {
  display: block;
  background-color: #eeeeee;
  margin: 10px;
}

.thumb img {
  display: block;
  margin: 0;
  padding: 0;
  width: 100%;
  height: auto;
  transition-duration: 0.2s;
}

.thumb img:hover,
.thumb img:focus,
.thumb img:active {
  opacity: 0;
}

.caption {
    position: absolute;
    display: block;
    top: 0;
    width: 100%;
    height: 100%;
    font-size: 20px;
    text-align: center;
    vertical-align: middle;
    opacity: 0;
    visibility: hidden;
    background-color: red; /*for test red*/
    transition-duration: 0.8s;
    transform: scale(0.67);
}

.col-25:nth-of-type(4n-1) .caption {
    left: 0;
    right: auto;
    top: -100%;
}

.col-25:nth-of-type(4n) .caption {
    left: auto;
    right: -100%;
}
.col-25:nth-of-type(4n+1) .caption {
    right: auto;
    left: -100%;
}
.col-25:nth-of-type(4n+2) .caption {
    right: auto;
    left: 0;
    top: -100%;
}

.col-25:nth-of-type(4n-1) .thumb:hover .caption {
    top: 0;
}

.col-25:nth-of-type(4n) .thumb:hover .caption {
    right: 0;
}

.col-25:nth-of-type(4n+1) .thumb:hover .caption {
    left: 0;
}

.col-25:nth-of-type(4n+2) .thumb:hover .caption {
    top: 0;
}


 .thumb:hover .caption {
    opacity: 1;
    transform: scale(1);
    visibility: visible;
}

.loader {
  position: absolute;
  background-color: #aaa;
  width: 18px;
  height: 18px;
  top: 50%;
  left: 50%;
  margin-top: -9px;
  margin-left: -9px;
  -moz-border-radius: 9px;
  -webkit-border-radius: 9px;
  border-radius: 9px;
  z-index: 999; 
}

/************************************************
Responsives
************************************************/

@media all and (min-width: 1601px) {

  .col-25 {
    width: 25%; }

  }

@media all and (max-width: 1600px) and (min-width: 1201px) {

   .col-25 {
    width: 25%; }

  }

@media all and (max-width: 1200px) and (min-width: 1001px) {

  .col-25 {
    width: 25%; }

  }

@media all and (max-width: 1000px) and (min-width: 801px) {

  .col-25 {
    width: 33.33333%; }
  }

@media all and (max-width: 800px) and (min-width: 601px) {

  .col-25 {
    width: 50%; }

  }

@media all and (max-width: 600px) and (min-width: 401px) {

  nav {
    margin: 0 10px;
  }

  #content {
    margin-left: 10px;
    margin-right: 10px;
  }

  .col-25 {
    width: 100%; }

  #scroll-top {
  right: 5px; }
  }

@media all and (max-width: 400px) and (min-width: 0px) {

  #content {
    margin-left: 10px;
    margin-right: 10px;
  }

  .col-25 {
    width: 100%; }

  #scroll-top {
  right: 5px; }
  }

<h1>Make sure the browser panel is wide enough to hold 4 items per row.</h1>
<div id="content">
  <div class="col-25">
    <div class="caption">Title untitled</div>
    <a class="thumb" href="#">
      <img src="http://fakeimg.pl/500x310/0066FF/">
    </a>
  </div>
  <div class="col-25">
    <a class="thumb" href="#">
      <img src="http://fakeimg.pl/500x310/0066FF/">
      <div class="caption">Title untitled</div>
    </a>
  </div>
  <div class="col-25">
    <a class="thumb" href="#">
      <img src="http://fakeimg.pl/500x310/0066FF/">
      <div class="caption">Title untitled</div>
    </a>
  </div>
  <div class="col-25">
    <a class="thumb" href="#">
      <img src="http://fakeimg.pl/500x310/0066FF/">
      <div class="caption">Title untitled</div>
    </a>
  </div>
  <div class="col-25">
    <a class="thumb" href="#">
      <img src="http://fakeimg.pl/500x310/0066FF/">
      <div class="caption">Title untitled</div>
    </a>
  </div>
  <div class="col-25">
    <a class="thumb" href="#">
      <img src="http://fakeimg.pl/500x310/0066FF/">
      <div class="caption">Title untitled</div>
    </a>
  </div>
  <div class="col-25">
    <a class="thumb" href="#">
      <img src="http://fakeimg.pl/500x310/0066FF/">
      <div class="caption">Title untitled</div>
    </a>
  </div>
  <div class="col-25">
    <a class="thumb" href="#">
      <img src="http://fakeimg.pl/500x310/0066FF/">
      <div class="caption">Title untitled</div>
    </a>
  </div>
  <div class="col-25">
    <a class="thumb" href="#">
      <img src="http://fakeimg.pl/500x310/0066FF/">
      <div class="caption">Title untitled</div>
    </a>
  </div>
  <div class="col-25">
    <a class="thumb" href="#">
      <img src="http://fakeimg.pl/500x310/0066FF/">
      <div class="caption">Title untitled</div>
    </a>
  </div>
  <div class="col-25">
    <a class="thumb" href="#">
      <img src="http://fakeimg.pl/500x310/0066FF/">
      <div class="caption">Title untitled</div>
    </a>
  </div>
  <div class="col-25">
    <a class="thumb" href="#">
      <img src="http://fakeimg.pl/500x310/0066FF/">
      <div class="caption">Title untitled</div>
    </a>
  </div>
  <div class="col-25">
    <a class="thumb" href="#">
      <img src="http://fakeimg.pl/500x310/0066FF/">
      <div class="caption">Title untitled</div>
    </a>
  </div>
  <div class="col-25">
    <a class="thumb" href="#">
      <img src="http://fakeimg.pl/500x310/0066FF/">
      <div class="caption">Title untitled</div>
    </a>
  </div>
  <div class="col-25">
    <a class="thumb" href="#">
      <img src="http://fakeimg.pl/500x310/0066FF/">
      <div class="caption">Title untitled</div>
    </a>
  </div>
  <div class="col-25">
    <a class="thumb" href="#">
      <img src="http://fakeimg.pl/500x310/0066FF/">
      <div class="caption">Title untitled</div>
    </a>
  </div>
</div>