The below is the css and html for the roll-over box thingy, all I want to know is how to replicate this and have more of the roll-over boxes repeated and aligned underneath. The html for it is the class "overbox" part, I've tried many ways to get more of these but its just been causing me more issues and I'm only making it more of a mess!
.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><!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>
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>