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


Tags: html,css,website,repeat,rollover

Problem :

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>



Solution :

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>


    CSS Howto..

    how to force 100% height on a dynamic drive css fluid/fixed layout

    Change how CSS border edges meet? [duplicate]

    How to dynamically change element alignment?

    CSS - how not to scroll parts of the page? [closed]

    WordPress TwentyTen menu: how to CSS-select sub-menus in a specific position?

    How to divide parent div's height between child divs

    What is cufon and canvas and how to overwrite them

    how to select a class which is children of many elements

    How to change CSS style without id or class

    How to scale html font size in Bootstrap 4 without breaking responsive navbar

    How to efficiently update css on multiple selector classes in jquery

    How to put a css tag in an element if another has this element [closed]

    How to change the css class=“current” when using page jumping (single page website)?

    How to make an external HTML file not appear in the home page?

    How to prevent span tags overlapping each other?

    How to best make a hover navbar?

    How to create a static footer in CSS?

    How to setup a multi-department form using JavaScript

    web app CSS navbar retina icons - How can I fit a 60x60 icon into a 30x30 background-image on IE7+8?

    How to center CSS Navigation Menu

    How to disable animation in a specific element in CSS

    css not showing inline

    How to make a pure css triangle which has a white center

    How do I achieve this animation using javascript/jquery? [closed]

    How to make a content div stretch from a header div to a footer div?

    How to hide elements in mobile devices? CSS

    How to perform arithmetic operations in CSS?

    How to show hidden part of an image which is inside a fixed height div, using just the CSS?

    CakePHP: How to use PHP to dynamically use a CSS property type in an MVC framework

    How to align elements so CSS fixed doesnt overlap on page load