Problem z www

Możesz zrobić coś takiego:

HTML:
 

  <div id="kafelki">
    <div class="kafel">
      <a href="#"><img class="bot" src="./data/files/images/test-bot.jpg" /><img class="top" src="./data/files/images/test-top.jpg" /> </a>
    </div>
    
    <div class="kafel">
      <a href="#"><img class="bot" src="./data/files/images/test-bot.jpg" /><img class="top" src="./data/files/images/test-top.jpg" /> </a>
    </div>
    
    <div class="kafel">
      <a href="#"><img class="bot" src="./data/files/images/test-bot.jpg" /><img class="top" src="./data/files/images/test-top.jpg" /> </a>
    </div>
    
    <div class="kafel">
      <a href="#"><img class="bot" src="./data/files/images/test-bot.jpg" /><img class="top" src="./data/files/images/test-top.jpg" /> </a>
    </div>
    
    <div class="kafel">
      <a href="#"><img class="bot" src="./data/files/images/test-bot.jpg" /><img class="top" src="./data/files/images/test-top.jpg" /> </a>
    </div>
  </div>

CSS:
 

#kafelki {
  margin:0 auto;
  width:1000px
}
#kafelki .kafel{
  position:relative;
  float:left;
  width:196px;
  height:250px;
  margin-right:5px;
}
#kafelki .kafel:last-child{
  margin-right:0px;
}

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

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

w html daj <a href="https://skript.pl"><div id="kafelek1"> </div> </a>

w cssie ustawiasz float left/right dla 2 pierwszych i potem br'em w html i tak samo jak w tych górnych, chyba zrozunmiales xd

A jak to CSS ustawić ?