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

转载作者：行者123 更新时间：2023-11-28 03:02:40

下面是滚动框的 css 和 html，我想知道的是如何复制它并在下面重复和对齐更多的滚动框。它的 html 是类“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>

最佳答案

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>

关于html - 我怎样才能重复图像翻转并在我的网站下方对齐多个图像？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34049081/

文章推荐： jquery - 滑入和滑出图像

文章推荐： c++ - 使用 C++ 在 opencv 中检测图像中任何文本的位置

php - 步进搜索算法。从 N 中选择一个，重复，重复，查看最终结果
我想知道如何考虑需要您做出某些选择才能看到最终结果的搜索系统。我说的是 select 表单，您可以在其中根据您的选择继续操作，然后您会看到结果。下面描述了我正在谈论的一个随机示例。想象一下 Init
MYSQL - 重复
您好，我目前正在编写一些软件来管理我们的库存。我搜索了 2 个表 master_stock(保存每一个股票代码和描述)库存(保存库存代码、地点、数量...) 一切都很好，但这是我遇到的问题。假设我的
mysql向表中插入数据，重复
我有 2 个表，我想合并其数据。id 是我的关键字段(增量且不同)。表1和表2字段说明例如:id - 名称 - 值我想将表2的所有数据插入表1，它们有不同的数据，但在某些行中有相同的id。所以当我
assembly - 重复/广播一个字节到整数寄存器的每个位置
我正在努力解决汇编中的一个问题，我必须获取十六进制代码的第一个字节 (FF) 并将其复制到整个值中: 0x045893FF input 0xFFFFFFFF output 我所做的
eclipse - 重复 eclipse
我有 Eclipse Indigo 版本，我可以在其中运行 Java 和 C++ 项目。但我只想使用另一个 Eclipse 来编写 C++ 项目。所以我将 eclipse(不是工作区)的源文件夹复制
java - 按钮代码使应用崩溃(重复)
This question already has answers here: What is a NullPointerException, and how do I fix it? (12个答案)
r - 每个值的累积计数(重复)
This question already has answers here: Numbering rows within groups in a data frame (8个答案) 5个月前关闭。
vim - 更强大的点版本(重复)
我知道用q记录到寄存器中，但我想知道是否可以设置一些东西来快速调用最后一个记录，就像一样。回顾最后一个简短的编辑命令(有关的讨论请参阅 here。)。我知道@@，但它似乎只有在执行@z之后才起作
Xcode 重复/删除行
来自 Eclipse 并且一直习惯于复制行，发现 Xcode 没有这样的功能是很奇怪的。或者是吗？我知道可以更改系统范围的键绑定(bind)，但这不是我想要的。最佳答案要删除一行:Ctrl-A
Haskell，重复+排列的组合
假设我有一个包含元素的列表，例如[1,2,3,4,5,6,7,8]。我想创建长度为 N 的该元素的所有排列。因此，对于N = 4，它将是[[1,1,1,1],[1,1,1,2],[1,1,2,1],
java - JMenu 重复
我有一个带有 JMenu 的 JFrame。当我在某些情况下添加包含图像的 JPanel 时，程序首次启动时菜单会重复。调整大小时重复的菜单消失。任何建议都非常感激。谢谢。代码如下: public c
JAVA HashMap 重复
我正在尝试查找目录中文件的重复项。我对这个 block 有一个问题，它以文件地址作为参数: public void findFiles(ArrayList list){ HashMap hm
c# - 回发时列表框重复(重复)
我知道这个问题已经发布并且已经给出了答案，但我的情况不同，因为我在单个方法上填充多个下拉列表，所以如果我点击此链接 After every postback dropdownlist items re
c# - 从时间段中选择一天 - 重复
我正在尝试为我的日历应用程序实现重复模式。我希望它的工作方式与 Outlook 在您设置重复约会时的工作方式相同。 public async Task> ApplyReccurrencePeriod
c# - 重复 cookies ？
我有一个利用 cookie 来支持准向导的应用程序(即，它是一组相互导航的页面，它们必须以特定顺序出现以进行注册)。加载 Logon.aspx 页面时 - 默认页面 - 浏览器 cookie 看起来
Javascript 重复 if 语句更好的解决方案？
我有 3 个输入，代码检查它们是否为空，如果为空，则将变量值添加到输入中。所以我有 3 个具有值的变量: var input1text = "something here"; var input2t
javascript - 仅更改数组元素三次，重复
根据数组的长度更改数组的每个元素的最佳方法是什么？例如: User #1 input = "XYZVC" Expected Output = "BLABL" User #2 input = "XYZ
javascript - Algolia 重复
我在让 Algolia 正常工作时遇到了一些麻烦。我正在使用 NodeJS 并尝试在我的数据库和 Algolia 之间进行一些同步，但由于某种原因似乎随机弹出大量重复项。如您所见，在某些情况下，会弹
java - ANTLR4 重复 AND
遵循以下规则: expr: '(' expr ')' #exprExpr | expr ( AND expr )+ #exprAnd | expr ( OR expr )+ #exprO
Android动画应该从左进入，等待一段时间再从右离开，重复
我有一个布局，我想从左边进入并停留几秒钟，然后我希望它从右边离开。为此，我编写了以下代码: 这里我在布局中设置数据: private void loadDoctor(int doctorsInTheL

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

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

HTML

JavaScript