[html]<style>
.table {
  display: grid;
  grid-template: repeat(4, 25vw)/repeat(4, 25vw);
}
.table div {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  border: 1px solid red;
}
</style>

<div class="table">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
  <div>10</div>
  <div>11</div>
  <div>12</div>
</div>[/html]

[html]<style>
.grid-img {display: grid;width: min-content;}
.grid-img img, .grid-img div {grid-area: 1 / 1;transition: all 1.7s linear;}
.grid-img div {color: #000000;text-align: center;opacity: 0;}
.grid-img:hover div {
  color: #000000;
  text-shadow:
    -0.2px -0.2px 0 #000000,
    0.2px -0.2px 0 #000000,
    -0.2px 0.2px 0 #000000,
    0.2px 0.2px 0 #000000;
  letter-spacing: 0.9px;
opacity: 1;
}
.grid-img:hover img {opacity: 0.4;}
</style>
<div class="grid-img">
   <div>здесь текста много</div>
<img src="https://forumavatars.ru/img/avatars/0000/14/1c/23723-1429784059.gif" alt="">
</div>[/html]

[html]<style type="text/css">
#info-randomly {
  position: relative;
  overflow: hidden;
  height: auto;
  width: auto;
}
#info-randomly div {
  display: none;
  animation: 3s slidein;
}
@keyframes slidein {
  from {
    margin-left: 100%;
    width: 300%;
  }

  to {
    margin-left: 0%;
    width: 100%;
  }
}
</style>

<div id="info-randomly">
<div>
"Пожалуй, Глориэн Беттерайз — лучшее, что могло случиться с некогда крохотной захиревшей забегаловкой на одной из северных площадей столицы. По крайней мере, так считала она сама и дюжина единиц живой силы, трудящейся в заведении. [<a href='http://anselior.1bb.ru/viewtopic.php?id=78#p1676'>читать далее</a>]",
</div>
<div>
"Некоторых людей удержать на одном месте очень трудно, других попросту невозможно. Где-то на задворках сознания Реэль помнила, как клятвенно обещала держаться в двух-трех сутках езды от поместья своего Лорда, где-то там же собиралась действительно сдержать обещание. [<a href='http://anselior.1bb.ru/viewtopic.php?id=77#p1756'>читать далее</a>]",
</div>
<div>
"Да, Ариес вспомнил, как погоня за одним из культистов заставила его поплыть в Альварос. Судя по сообщениям людей, этот культист был одним из наиболее могущественных, такого Эль’Териан не мог упустить и с великим удовольствием ждал подходящего момента, когда мог бы сокрушить ещё одного из своих заклятых врагов. [<a href='http://anselior.1bb.ru/viewtopic.php?id=54#p1168'>читать далее</a>]",
</div>
<div>
"«Черный призрак» растворялся во мраке и тумане, и разглядеть можно было разве что его величественный силуэт, а будь сейчас подняты паруса, они бы тоже слились с темным беззвездным небом. В такие моменты можно было только в очередной раз убедиться, что корабль полностью оправдывает свое имя. [<a href='http://anselior.1bb.ru/viewtopic.php?id=62#p1678'>читать далее</a>]");
</div>
</div>

<script>
$(function() {
  var n = 1, divs = $('#info-randomly div').get();
  for ( ; n--; )  {
  $(divs.splice(Math.random()*divs.length|0,1)).prependTo('#info-randomly').show();
  }
});
</script>[/html]