x1

by seevis

HTML

<div class="INV">
  <div class="izINV" style="background-image: url(https://i.imgur.com/NYOzgZ3.jpg);"></div>
  <div class="deINV">
    <div class="ttINV"><img class="icoINV" src="https://i.imgur.com/NYOzgZ3.jpg"><span>Nombre Apellido<i>inventario</i></span></div>
    <div class="cosINV">

      <div>
        <div><img src="https://images-na.ssl-images-amazon.com/images/I/51FtREtkRiL.png"></div>
        <div><b>Tipo:</b> Nombre Item<br>
          <b>Unidades:</b> XX<br>
          <b>Usos:</b> Pequeña descripción aquí. Muy pequeña. O un enlace. Evitar biblias.</div>
      </div>

      <div>
        <div><img src="https://vignette.wikia.nocookie.net/r2dremake/images/1/11/Pewpew-0.png/revision/latest?cb=20180122050731"></div>
        <div><b>Tipo:</b> Nombre Item
          <b>Unidades:</b> XX
          <b>Usos:</b> Pequeña descripción aquí. Muy pequeña. O un enlace. Evitar biblias.</div>
      </div>

      <div>
        <div><img src="https://t4.rbxcdn.com/5345ad704f826fb7d2e79f3e34a2db7c"></div>
        <div><b>Tipo:</b> Nombre Item
          <b>Unidades:</b> XX
          <b>Usos:</b> Pequeña descripción aquí. Muy pequeña. O un enlace. Evitar biblias.</div>
      </div>

      <div>
        <div><img src="http://aux.iconspalace.com/uploads/19412865831843981463.png"></div>
        <div><b>Tipo:</b> Nombre Item
          <b>Unidades:</b> XX<b>Usos:</b> Pequeña descripción aquí. Muy pequeña. O un enlace. Evitar biblias.</div>
      </div>

      <div>
        <div><img src="https://epicstockmedia.com/wp-content/uploads/2018/05/Futuristic.png"></div>
        <div><b>Tipo:</b> Nombre Item
          <b>Unidades:</b> XX
          <b>Usos:</b> Pequeña descripción aquí. Muy pequeña. O un enlace. Evitar biblias.</div>
      </div>

      <div>
        <div><img src="https://cdn.pixabay.com/photo/2018/09/06/15/43/futuristic-eye-3658565_960_720.png"></div>
        <div><b>Tipo:</b> Nombre Item
          <b>Unidades:</b> XX
          <b>Usos:</b> Pequeña descripción aquí. Muy...

CSS

@font-face {
  font-family: "Anteater";
  src: url(https://cdn.rawgit.com/EmmesCodes/Tipografias/6eab944a/Anteater.ttf);
}

.INV,
.INV * {
  box-sizing: border-box;
  transition-duration: 0.5s;
}

.INV {
  width: 600px;
  font: 10px Montserrat;
  color: #999;
  background: #1119;
  margin: auto;
  position: relative;
  padding: 20px 20px 20px 230px;
}

.izINV {
  position: absolute;
  width: 200px;
  top: 20px;
  box-shadow: 3px 0 #111, 4px 0;
  background-position: center center;
  left: 20px;
  bottom: 20px;
  background-size: cover;
}

.deINV {
  position: relative;
  z-index: 2;
}

.ttINV {
  display: block;
  margin: 20px -10px 0 -90px;
}

.icoINV {
  width: 108px;
  height: 108px;
  border: 3px solid #111c;
  box-shadow: 0 0 0 1px, 2px 2px 10px 2px #000;
}

.ttINV span {
  font: 30px/10px Anteater;
  color: #ffd1fd !important;
  text-shadow: 0 0 3px #ff00fc, 0 0 10px #ff0063, 0 0 10px #ff0063, 0 0 20px #ff0063;
  display: inline-block;
  vertical-align: top;
  margin: 60px 10px 0;
  width: calc(100% - 128px);
}

.ttINV span i {
  display: block;
  text-shadow: none;
  border-top: 1px solid;
  margin-top: 5px;
  letter-spacing: 5px;
  font: 10px Montserrat;
}

.cosINV>br {
  display: none;
}

.cosINV {
  overflow: auto;
  text-align: center;
  padding: 10px 0;
}

.cosINV>div {
  position: relative;
  width: 100px;
  height: 100px;
  display: inline-block;
  vertical-align: top;
  transform-style: preserve-3d;
  transform: perspective(600px);
  margin: 5px;
}

.cosINV>div>div {
  border: 1px dashed;
  padding: 5px;
  background: #0009;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

.cosINV>div img {
  max-width: 100%;
  max-height: 100%;
}

.cosINV>div:hover>div:nth-of-type(1),
.cosINV>div>div~div {
  transform: rotateY(180deg);
}

.cosINV>div>div~div {
  overflow: auto;
  text-align: left;
  backface-visibility: hidden;
}

.cosINV>div:hover>div {
  color: #ffd1fd;
  box-shadow: 0 0 3px #ff00fc, 0 0 15px #ff0063, inset 0 0 3px...