Widget afbeeldingen naast elkaar plaatsen

Forumversie : phpBB2
Functie op het forum : Administrator
Betreffende webbrowser(s) : Chrome

Ik wil graag hoover afbeeldingen naast elkaar plaatsen op een forum widget.
Alleen weet ik niet welke code ik moet gebruiken. De afbeeldingen zijn 100px breed en de breedte van forum widgets staan ingesteld op 230px

Ik heb snel iets in elkaar gestoken maar het is wel heel basis. Je moet gewoon heel de code kopiëren en plakken in een zelfgemaakte widget.

Code:

<style>.img_cont {position: relative; overflow: hidden; float: left; width: 100px; height: 100px; margin: 1px;} .img_cont .hover {position: relative; display: table-cell; top: -100px; width: 100px; height: 100px; vertical-align: middle; text-align: center; transition: 0.5s; opacity: 0;} .img_cont:hover .hover {opacity: 1.0;}</style>
<div class="img_cont">
   <img src="http://i.imgur.com/c0k0zvA.jpg?1" />       
   <div class="hover">
      tekst     
   </div>
</div>
<div class="img_cont">
   <img src="http://i.imgur.com/c0k0zvA.jpg?1" />         
   <div class="hover">
      tekst     
   </div>
</div>
<div class="img_cont">
   <img src="http://i.imgur.com/c0k0zvA.jpg?1" />         
   <div class="hover">
      tekst     
   </div>
</div>

Als je wat kennis van css hebt kan je eventueel de opmaak zelf aanpassen anders moet je eens een uitgebreide beschrijving maken over hoe het er precies moet uitzien.
bv: wanneer je met je muis over de afbeelding gaat schuift er een halfdoorzichtige witte blok voor met een groene vette tekst.

thanksies <3

- opgelost