PeeItchPee PeeItchPee - 1 month ago 9
CSS Question

Positioning images on a page (HTML)

These images are using a CSS code for hovering effects, everything works good except i have no idea how to re arrange their position on the page.

Right now they are horizontally on top of each other, how can i make them side by side?:



body {
color:#000000;
background-color:#000000;
background-image:url('Background Image');
background-repeat:no-repeat;
}
a { color:#0000FF; }
a:visited { color:#800080; }
a:hover { color:#008000; }
a:active { color:#FF0000; }
#cf {
position:relative;
height:281px;
width:450px;
margin:0 auto;
}

#cf img {
position:absolute;
left:0;
-webkit-transition: opacity 200ms ease-in-out;
-moz-transition: opacity 200ms ease-in-out;
-o-transition: opacity 200ms ease-in-out;
transition: opacity 200ms ease-in-out;
}

#cf img.top:hover {
opacity:0;
}

<a href="http://example.com/page1">
<div id="cf">
<img class="bottom" src="images/img_a_1.jpg" />
<img class="top" src="images/img_a_2.jpg" />
</div></a>

<a href="http://example.com/page2">
<div id="cf">
<img class="bottom" src="images/img_b_1.jpg" />
<img class="top" src="images/img_b_2.jpg" />
</div></a>

<a href="http://example.com/page3">
<div id="cf">
<img class="bottom" src="images/img_c_1.jpg" />
<img class="top" src="images/img_c_2.jpg" />
</div></a>




Answer

As arhak has previously commented, we do not use an id more than once on a page, they must be unique. Here are the following changes:

  • Changed each #cf to class .cf.

  • Added display:table-cell to each .cf so that they are side-by-side.

  • Changed each .cf dimensions to something manageable 50 x 50px.

  • Replaced non-functioning <img> src to working values*.

  • Decreased the size of each .cf to 50 x 50px*.

All of these changes are optional with the exception of the first and second changes.

*I know that your relative urls work for you, but an example that doesn't work here will make things harder to demonstrate. In the future if you have images, use those or images of equivalent size in your examples. If we don't know that 50 x 50px is insufficient for your requirements, that will slowdown the process in finding a resolution.

SNIPPET

body {
  color: #fff;
  background-color: #000000;
  background-image: url('Background Image');
  background-repeat: no-repeat;
}
a {
  color: #0000FF;
}
a:visited {
  color: #800080;
}
a:hover {
  color: #008000;
}
a:active {
  color: #FF0000;
}
.cf {
  position: relative;
  height: 50px;
  width: 50px;
  margin: 0 auto;
  display:table-cell;
}
.cf img {
  position: absolute;
  left: 0;
  -webkit-transition: opacity 200ms ease-in-out;
  -moz-transition: opacity 200ms ease-in-out;
  -o-transition: opacity 200ms ease-in-out;
  transition: opacity 200ms ease-in-out;
}
.cf img.top:hover {
  opacity: 0;
}
<body>
  <a href="http://example.com/page1">
    <div class="cf">
      <img class="bottom" src='http://placehold.it/50x50/00f/fff?text=1'>
      <img class="top" src='http://placehold.it/50x50/cf0/000?text=2'>
    </div>
  </a>

  <a href="http://example.com/page2">
    <div class="cf">
      <img class="bottom" src='http://placehold.it/50x50/0e0/110?text=3'>
      <img class="top" src='http://placehold.it/50x50/0bb/011?text=4'>
    </div>
  </a>

  <a href="http://example.com/page3">
    <div class="cf">
      <img class="bottom" src='http://placehold.it/50x50/fff/000?text=5'>
      <img class='top' src='http://placehold.it/50x50/f00/fff?text=6'>
    </div>
  </a>
</body>