trying to make some boxes hover but another part of the code makes them not work and cant figure out why

Question

i am trying to make a web shop cause im bored this is some of the code from the shop when i delete the parts in "managed by" (html) the other pictures hover like there suposed to, but when i put it back the about box moves when i hoverover all the other boxes i cant figure out for the life of me whats doing it

html

    <a href=""><img src="img/midlertidigabout.png" /></a>
    <div class="large-12 columns productgalleries">
      <div class="row">

        <div class="large-3 small-5 columns">
          <a href=""> <img src="img/midlertidigt.png">

            <div class="panel">
              <h5>INSERT PRICE HERE</h5>
              <h6 class="subheader">€666</h6>
            </div>
        </div>

        <div class="large-3 small-5 columns">
          <a href=""> <img src="img/midlertidigt.png">
            <div class="panel">
              <h5>INSERT PRICE HERE</h5>
              <h6 class="subheader">€666</h6>
            </div>
        </div>

        <div class="large-3 small-5 columns">
          <a href=""> <img src="img/midlertidigt.png">

            <div class="panel">
              <h5>INSERT PRICE HERE</h5>
              <h6 class="subheader">€666 </h6>
            </div>
        </div>

        <div class="large-3 small-5 columns">
          <a href=""> <img src="img/midlertidigt.png">

            <div class="panel">
              <h5>INSERT PRICE HERE</h5>
              <h6 class="subheader">666 </h6>
            </div>
        </div>

      </div>
    </div>

  </div>

  <!-- End Thumbnails -->



  <!-- Managed By -->
  <div class="row">
    <div class="large-12 columns">
      <div class="panel">
        <div class="row">

          <div class="large-2 small-6 columns">
            <img src="img/midlertidigt.png">
          </div>

          <div class="large-10 small-6 columns">
            <strong> About us  <hr/></strong>

            <h5>
                filler text </h5>
          </div>

        </div>
      </div>
    </div>

    <!-- End Managed By -->

css

.slider{
 display:inline-block;
 overflow:hidden;
}

a:before {
 content:attr(rel);
 position:absolute;
 top:20px;
}

a{
 position:relative;
 top:0;
 -webkit-transition-duration: .25s;
 }

a:hover {
 top:-20px; 
 -webkit-transition-duration: .25s;  
}

hope this is enough info to help, have a good day

Answer 1

According to your css, you're telling your 'a' elements to move, not a containing element like a 'div'. You're probably seeing the boxes move because you aren't closing your 'a' tags like they should be, with the exception of the first one. I would suggest targeting your containers instead. An example could look something like the following based on your code:

<div class="large-3 small-5 columns hover">
    <a href=""><img src="img/midlertidigt.png"></a>

    <div class="panel">
        <h5>INSERT PRICE HERE</h5>
        <h6 class="subheader">€666</h6>
    </div>
</div>

with your css like this (replace 'a' with '.hover':

.hover:before {
    content:attr(rel);
    position:absolute;
    top:20px;
}

.hover{
    position:relative;
    top:0;
    -webkit-transition-duration: .25s;
}

.hover:hover {
    top:-20px; 
    -webkit-transition-duration: .25s;  
}