<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.3/css/all.css" />

<div class="skeleton">
  <div class="sedule">
  <div class="sedule-image">
  <i class="fa fa-user"></i>
  </div>  
  <div class="sedule-content">  
  <div class="sedule-title">
  Font Awesome
  </div>
  <div class="sedule-text">
  Шрифтовые знаки, что идут 1 номером
  </div>
  </div>
  </div>
  <div class="sedule">
  <div class="sedule-image">
  <img src="Ссылка на знак в формате PNG" />
  </div>  
  <div class="sedule-content">
  <div class="sedule-title">
  IMG
  </div>
  <div class="sedule-text">
  Графический ресунок по ссылке
  </div>
  </div>
  </div>

  <div class="sedule">
  <div class="sedule-image">
<svg
  width="100"
  height="100"
  viewBox="0 0 24 24"
  stroke="#0e2136"
  stroke-width="2"
  stroke-linecap="round"
  stroke-linejoin="round"
  fill="none"
>
  <circle cx="12" cy="12" r="9" />
  <path d="M12,3 C 8,3 8,21 12,21 C 16,21 16,3 12,3"/>
  <path d="M3,12 C 3,8 21,8 21,12 C 21,16 3,16 3,12"/>
</svg>
  </div>  
  <div class="sedule-content">
  <div class="sedule-title">
  svg
  </div>
  <div class="sedule-text">
  <p>Здесь идет описание <p></p>
  <p>и также продолжение</p>
  </div>
  </div>
  </div>
</div>

.skeleton {
  display: flex;
  flex-wrap: wrap;  
  justify-content: center;
  background: url(Ссылка на фон на странице);
  background-size: cover;
  background-position: center;
  margin: 20px 0;  
  padding: 20px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2), 0 16px 20px rgba(0,0,0,0.2);
}
.skeleton:hover .sedule:after {
  opacity: 1;
}
.skeleton .sedule {
  background-color: #4f93ce;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  position: relative;
  width: calc(33.333% - 20px);
  margin: 10px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2), 0 16px 20px rgba(0,0,0,0.2);
  opacity: 0.95;
}
@media screen and (max-width: 1534px) {
  .skeleton .sedule {
  width: calc(50% - 20px);
  }
}
@media screen and (max-width: 520px) {
  .skeleton .sedule {
  width: calc(100% - 20px);
  }
}
.skeleton .sedule:hover:before {
  opacity: 1;
}
.skeleton .sedule:before,
.skeleton .sedule:after {
  border-radius: inherit;
  content: "";
  height: 100%;
  left: 0px;
  opacity: 0;
  position: absolute;
  top: 0px;
  transition: opacity 500ms;
  width: 100%;
}
.skeleton .sedule:before {
  background: radial-gradient(600px circle at var(--mouse-x) var(--mouse-y), rgba(191, 226, 255, 0.4), transparent 40%);
  z-index: 3;
}
.skeleton .sedule:after {  
  background: radial-gradient(500px circle at var(--mouse-x) var(--mouse-y), rgba(191, 226, 255, 0.9), transparent 40%);
  z-index: 1;
}
.skeleton .sedule .sedule-content {
  background-color: #337AB7;
  border-radius: inherit;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  text-align: center;
  padding: 78px 16px 16px;
  z-index: 2;
  height: 100%;
  line-height: 1.2;
  margin: 2px;
}
.skeleton .sedule .sedule-image {
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);  
  z-index: 10;
}
.skeleton .sedule .sedule-image i {
  font-size: 64px;
  color: #16354f;
}
.skeleton .sedule .sedule-image img {
  height: 64px;
}
.skeleton .sedule .sedule-image svg {
  height: 64px;
  fill: #16354f;
}
.skeleton .sedule .sedule-title {
  font-size: 18px;
  font-family: 'Roboto', sans-serif;
  padding: 10px 0;
  color: #BFE2FF;
  text-transform: uppercase;
  font-weight: 600;
}
.skeleton .sedule .sedule-text,
.skeleton .sedule .sedule-text p {
  font-size: 15px;
  font-family: Verdana, sans-serif;
  color: #FFF;
  margin: 0;
  line-height: 1.2;
}
.skeleton .sedule .sedule-text p:not(:last-child) {
  margin-bottom: 10px;
}

let skeleton = document.querySelectorAll(".skeleton");  
for( let i = 0; i < skeleton.length; i++){
  skeleton[i].onmousemove = e => {
  for(const sedule of document.getElementsByClassName("sedule")) {
  const rect = sedule.getBoundingClientRect(),
  x = e.clientX - rect.left,
  y = e.clientY - rect.top;
  sedule.style.setProperty("--mouse-x", `${x}px`);
  sedule.style.setProperty("--mouse-y", `${y}px`);
  };
  }
}

Полностью стиль дизайна выполнен на стилистике CSS, что закреплена под основой, а значит вы сами можете поставить тот цветовой оттенок, что соответствует вашему сайту или блогу.

Также здесь присутствуют небольшие тени, которые в большинстве сделаны, чтоб подчеркнуть основу каркаса, и также меняются при наведение, где проводя курсор, за ним следует освещение.

[url=https://codepen.io/kocsten/full/abKgxaY][color=red][b]Демонстрация[/b][/color][/url]

Источник: atuin.ru

[url=http://zornet.ru/load/0-0-0-10709-20][color=red][b]Скачать Подсветка блоков HTML при наведении клика[/b][/color][/url][/i]