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 style Java FX TableView column header using CSS

    How to fit two divs side by side horizontally?

    How to use CSS to increase the contrast on visited hyperlinks?

    How to vertically align numbers of ol?

    CSS Keyframes: How to move div to certain position

    How to make CSS animation jump rather than slide

    How to add tags/images on javascript fetched textarea data?

    How to add a tooltip for just the background image of an input field with HTML and CSS

    How to hardware accelerate a box-shadow animation in CSS?

    How to hold three different text alignments in one CSS Box?

    CSS question: how to remove the border from an image in WordPress

    How to select odd child of dl element with css?

    How do you wrap one text div around another that follows as a sibling in the DOM?

    How implement google fonts when download the font in collection?

    Make a slide show by fading in background images [closed]

    How to attach user CSS to Microsoft Edge?

    I can't get all the div's to show up with the same #id

    How to make a curve on a rectangle's top in css? only in top edge

    How to animate a height change using javascript and css?

    Ionic 2.0.0-beta.24 how can i import node_module css files without ionic.config.js

    How do I access HTML elements created by a function? The elements are “undefined” and therefore not CSS apply-able

    Third level drop down css wont show & content/links are out of order?

    How can I generate a random color with Stylus CSS?

    How do I check for a css value using jQuery?

    Should I turn these images into a sprite, and if so, how would I do so? (picture included)

    ASP.NET How to set Text to the right side of image

    How to set background color for a boxed link?

    How to take in account children for :nth-child

    How to apply custom css class to extjs grid column, and remove it with delay?

    How to cancel left or right rules with an !important tag?