我怎样才能重复图像翻转并在我的网站下方对齐多个图像？

Question

下面是翻转框的 css 和 html，我想知道的是如何复制它并重复和对齐更多翻转框下。 html 因为它是 class "overbox" 部分，我尝试了很多方法来获得更多这些，但它只是给我带来了更多问题，我只是让它变得更多一团糟！

.box {
  cursor: pointer;
  height: 281px;
  position: relative;
  overflow: hidden;
  width: 500px;
  margin-left:150px;
}

.box img {
  position: absolute;
  left: 0;
  -webkit-transition: all 300ms ease-out;
  -moz-transition: all 300ms ease-out;
  -o-transition: all 300ms ease-out;
  -ms-transition: all 300ms ease-out;
  transition: all 300ms ease-out;
}
.box .overbox {
  background-color: #304562;
  position: absolute;
  top: 0;
  left: 0;
  color: #fff;
  z-index: 100;
  -webkit-transition: all 300ms ease-out;
  -moz-transition: all 300ms ease-out;
  -o-transition: all 300ms ease-out;
  -ms-transition: all 300ms ease-out;
  transition: all 300ms ease-out;
  opacity: 0;
  width: 500px;
  height: 281px;
  padding: 130px 20px;
}

.box:hover .overbox { opacity: 1; }
.box .overtext {
  -webkit-transition: all 300ms ease-out;
  -moz-transition: all 300ms ease-out;
  -o-transition: all 300ms ease-out;
  -ms-transition: all 300ms ease-out;
  transition: all 300ms ease-out;
  transform: translateY(40px);
  -webkit-transform: translateY(40px);
}

.box .title {
  font-size: 20px;
  text-transform: uppercase;
  opacity: 0;
  transition-delay: 0.1s;
  transition-duration: 0.2s;
}

.box:hover .title,
.box:focus .title {
  opacity: 1;
  transform: translateY(0px);
  -webkit-transform: translateY(0px);
}

.box .tagline {
  font-size: 0.8em;
  opacity: 0;
  transition-delay: 0.2s;
  transition-duration: 0.2s;
}

.box:hover .tagline,
.box:focus .tagline {
  opacity: 1;
  transform: translateX(0px);
  -webkit-transform: translateX(0px);
}

<!DOCTYPE html>
<html>
<head>
<title>XYZ</title>
<link href="../css/style.css" rel="stylesheet" type="text/css">
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
</head>
<body>
<header>
<div id="header">
<h1>CarWiki</h1>
</div>
</header>
<nav class="main-nav">
<ul>
<li><a href="../index.html">Home</a></li>
<li><a href="text.html">Cars</a></li>
<li><a href="tables.html">Opening Times</a></li>
<li><a href="forms.html">Queries & Help</a></li>
<li><a href="validation.html">Validation</a></li>
<li><a href="references.html">References</a></li>
</ul>
</nav>
<div class="para1">
<p>Through this page you will be able to view a range of different cars and find statistics about them. For example if your wanting to find out a specific vehicles price, engine, top speed etc you can simply do this by hovering over the desired car. The different categories of car statistics we provide for the cars listed can be found below.</p>
</div>
<div class="bullets">
<ul>
<li>Engine Type</li>
<li>Litre Capacity</li>
<li>Wheel Drive Type</li>
<li>Top Speed</li>
<li>0 to 60 Speed</li>
<li>BHP</li>
<li>Price's From Offical Dealerships</li>
</ul>
<div id="car_header">
<h>Car List</h>
<div class="box"> <img src="../images/Ferrari.jpg">
  <div class="overbox">
    <div class="title overtext">Ferrari 458 Italia Spider</div>
    <div class="tagline overtext">SPECS:</div>
  </div>
</div>
</div>
</div>
<footer>
<nav class="footer-nav">
<p> © Atif Masood</p>
</nav>
</footer>
</body>
</html>

Answer 1

HTML

<!DOCTYPE html>
<html>

<head>
  <title>XYZ</title>
  <link href="../css/style.css" rel="stylesheet" type="text/css">
  <meta http-equiv="content-type" content="text/html;charset=utf-8" />
</head>

<body>
  <header>
    <div id="header">
      <h1>CarWiki</h1>
    </div>
  </header>
  <nav class="main-nav">
    <ul>
      <li><a href="../index.html">Home</a></li>
      <li><a href="text.html">Cars</a></li>
      <li><a href="tables.html">Opening Times</a></li>
      <li><a href="forms.html">Queries & Help</a></li>
      <li><a href="validation.html">Validation</a></li>
      <li><a href="references.html">References</a></li>
    </ul>
  </nav>
  <div class="para1">
    <p>Through this page you will be able to view a range of different cars and find statistics about them. For example if your wanting to find out a specific vehicles price, engine, top speed etc you can simply do this by hovering over the desired car.
      The different categories of car statistics we provide for the cars listed can be found below.</p>
  </div>
  <div class="bullets">
    <ul>
      <li>Engine Type</li>
      <li>Litre Capacity</li>
      <li>Wheel Drive Type</li>
      <li>Top Speed</li>
      <li>0 to 60 Speed</li>
      <li>BHP</li>
      <li>Price's From Offical Dealerships</li>
    </ul>
    <div id="car_header">
      <h>Car List</h>
      <div id="boxes">
        <div class="box" id="1"> <img src="../images/Ferrari.jpg">
          <div class="overbox">
            <div class="title overtext">Ferrari 458 Italia Spider</div>
            <div class="tagline overtext">SPECS:</div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <footer>
    <nav class="footer-nav">
      <p> © Atif Masood</p>
    </nav>
  </footer>
</body>

</html>

JAVASCRIPT

function duplicate() {
  var div = document.getElementById('1'),
    clone = div.cloneNode(true); // true means clone all childNodes and all event handlers
    clone2 = div.cloneNode(true); // add clones as neccesary
  clone.id = "2";
  clone2.id = "3";
  document.getElementById("boxes").appendChild(clone);
  document.getElementById("boxes").appendChild(clone2);
}
duplicate();

function duplicate() {
  var div = document.getElementById('1'),
    clone = div.cloneNode(true); // true means clone all childNodes and all event handlers
    clone2 = div.cloneNode(true); // add clones as neccesary
  clone.id = "2";
  clone2.id = "3";
  document.getElementById("boxes").appendChild(clone);
  document.getElementById("boxes").appendChild(clone2);
}
duplicate();

.box {
  cursor: pointer;
  height: 281px;
  position: relative;
  overflow: hidden;
  width: 500px;
  margin-left: 150px;
}

.box img {
  position: absolute;
  left: 0;
  -webkit-transition: all 300ms ease-out;
  -moz-transition: all 300ms ease-out;
  -o-transition: all 300ms ease-out;
  -ms-transition: all 300ms ease-out;
  transition: all 300ms ease-out;
}

.box .overbox {
  background-color: #304562;
  position: absolute;
  top: 0;
  left: 0;
  color: #fff;
  z-index: 100;
  -webkit-transition: all 300ms ease-out;
  -moz-transition: all 300ms ease-out;
  -o-transition: all 300ms ease-out;
  -ms-transition: all 300ms ease-out;
  transition: all 300ms ease-out;
  opacity: 0;
  width: 500px;
  height: 281px;
  padding: 130px 20px;
}

.box:hover .overbox {
  opacity: 1;
}

.box .overtext {
  -webkit-transition: all 300ms ease-out;
  -moz-transition: all 300ms ease-out;
  -o-transition: all 300ms ease-out;
  -ms-transition: all 300ms ease-out;
  transition: all 300ms ease-out;
  transform: translateY(40px);
  -webkit-transform: translateY(40px);
}

.box .title {
  font-size: 20px;
  text-transform: uppercase;
  opacity: 0;
  transition-delay: 0.1s;
  transition-duration: 0.2s;
}

.box:hover .title,
.box:focus .title {
  opacity: 1;
  transform: translateY(0px);
  -webkit-transform: translateY(0px);
}

.box .tagline {
  font-size: 0.8em;
  opacity: 0;
  transition-delay: 0.2s;
  transition-duration: 0.2s;
}

.box:hover .tagline,
.box:focus .tagline {
  opacity: 1;
  transform: translateX(0px);
  -webkit-transform: translateX(0px);
}

<!DOCTYPE html>
<html>

<head>
  <title>XYZ</title>
  <link href="../css/style.css" rel="stylesheet" type="text/css">
  <meta http-equiv="content-type" content="text/html;charset=utf-8" />
</head>

<body>
  <header>
    <div id="header">
      <h1>CarWiki</h1>
    </div>
  </header>
  <nav class="main-nav">
    <ul>
      <li><a href="../index.html">Home</a></li>
      <li><a href="text.html">Cars</a></li>
      <li><a href="tables.html">Opening Times</a></li>
      <li><a href="forms.html">Queries & Help</a></li>
      <li><a href="validation.html">Validation</a></li>
      <li><a href="references.html">References</a></li>
    </ul>
  </nav>
  <div class="para1">
    <p>Through this page you will be able to view a range of different cars and find statistics about them. For example if your wanting to find out a specific vehicles price, engine, top speed etc you can simply do this by hovering over the desired car.
      The different categories of car statistics we provide for the cars listed can be found below.</p>
  </div>
  <div class="bullets">
    <ul>
      <li>Engine Type</li>
      <li>Litre Capacity</li>
      <li>Wheel Drive Type</li>
      <li>Top Speed</li>
      <li>0 to 60 Speed</li>
      <li>BHP</li>
      <li>Price's From Offical Dealerships</li>
    </ul>
    <div id="car_header">
      <h>Car List</h>
      <div id="boxes">
        <div class="box" id="1"> <img src="../images/Ferrari.jpg">
          <div class="overbox">
            <div class="title overtext">Ferrari 458 Italia Spider</div>
            <div class="tagline overtext">SPECS:</div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <footer>
    <nav class="footer-nav">
      <p> © Atif Masood</p>
    </nav>
  </footer>
</body>

</html>

我怎样才能重复图像翻转并在我的网站下方对齐多个图像？

How can i repeat the image rollover and have multiple aligned underneath on my website?

html

css

rollover

repeat

web

HTML

JAVASCRIPT