Team with Title/Des/Social Icons. Change Background on Hover

Description

• adding team people with title/description/social icons, change colored background on hover, use list section simple
• view demo – password: abc
• buy me a coffee

1. Install Code

#1.1. First add Section > Choose Team > Choose Section with auto layout icon

#1.2. Hover on top right of section > Click EDIT CONTENT

#1.2-2. at Design > Choose Simple List

#1.3. at Elements > Enable these

#1.4. at Content, enter your desired image/text

#1.4-2. Note: Enter LinkedIn text/LinkedIn URL in Button

#1.5. Hover on Page where you use List > Click Gear icon

#1.6. Click Advanced > Paste this code

<!-- 09.26c12v11 Team with Title/Des/Social Icons. Change Background on Hover -->
<style>
:root {
  --card-border-radius: 16px;
  --text-box-border: 1px solid #e8e8e8;
  --text-bg-normal: #fff;
  --text-bg-hover: #000;
  --title-color-normal: #000;
  --desc-color-normal: #4a4a4a;
  --title-color-hover: #fff;
  --desc-color-hover: #d1d1d1;
  --linkedin-size: 38px;
  --linkedin-bg-normal: #f0f0f0;
  --linkedin-border-normal: 1px solid transparent;
  --linkedin-icon-color-normal: #000;
  --linkedin-bg-hover: #fff;
  --linkedin-border-hover: 1px solid #fff;
  --linkedin-icon-color-hover: #000;
}
.user-items-list-simple .list-item {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  overflow: visible !important;
}
.user-items-list-simple .list-item-media {
  border-radius: var(--card-border-radius) var(--card-border-radius) 0 0 !important;
  overflow: hidden !important;
  margin-bottom: 0 !important;
  width: 100% !important;
}
.user-items-list-simple .list-item-media-inner img {
  transition: transform 0.5s ease !important;
}
.user-items-list-simple .list-item:hover .list-item-media-inner img {
  transform: scale(1.08) !important;
}
.user-items-list-simple .list-item-content {
  background-color: var(--text-bg-normal) !important;
  border: var(--text-box-border) !important;
  border-top: none !important;
  border-radius: 0 0 var(--card-border-radius) var(--card-border-radius) !important;
  padding: 24px 20px !important;
  transition: all 0.3s ease !important;
  display: flex !important;
  flex-direction: row !important;
  justify-content: space-between !important;
  align-items: center !important;
}
.user-items-list-simple .list-item-content__text-wrapper {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  text-align: left !important;
  margin: 0 !important;
  flex: 1 !important;
}
.user-items-list-simple .list-item-content__title {
  color: var(--title-color-normal) !important;
  transition: color 0.3s ease !important;
  margin: unset !important;
  text-align: left !important;
}
.user-items-list-simple .list-item-content__description,
.user-items-list-simple .list-item-content__description p {
  color: var(--desc-color-normal) !important;
  transition: color 0.3s ease !important;
  margin: 0 !important;
}
.user-items-list-simple .list-item-content__button-container {
  margin: 0 0 0 15px !important;
  padding: 0 !important;
  flex-shrink: 0 !important;
}
.user-items-list-simple .list-item-content__button {
  font-size: 0 !important;
  width: var(--linkedin-size) !important;
  height: var(--linkedin-size) !important;
  border-radius: 50% !important;
  background-color: var(--linkedin-bg-normal) !important;
  border: var(--linkedin-border-normal) !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.3s ease !important;
  min-width: unset !important;
  min-height: unset !important;
}
.user-items-list-simple .list-item-content__button::before {
  content: 'in' !important;
  font-size: calc(var(--linkedin-size) * 0.55) !important;
  color: var(--linkedin-icon-color-normal) !important;
  line-height: 1 !important;
}
.user-items-list-simple .list-item:hover .list-item-content {
  background-color: var(--text-bg-hover) !important;
  border-color: var(--text-bg-hover) !important;
}
.user-items-list-simple .list-item:hover .list-item-content__title {
  color: var(--title-color-hover) !important;
}
.user-items-list-simple .list-item:hover .list-item-content__description,
.user-items-list-simple .list-item:hover .list-item-content__description p {
  color: var(--desc-color-hover) !important;
}
.user-items-list-simple .list-item:hover .list-item-content__button {
  background-color: var(--linkedin-bg-hover) !important;
  border: var(--linkedin-border-hover) !important;
}
.user-items-list-simple .list-item:hover .list-item-content__button::before {
  color: var(--linkedin-icon-color-hover) !important;
}
</style>

#2. Customize

#2.1. You can change style in Line 03 – Line 19

:root {
  --card-border-radius: 16px;
  --text-box-border: 1px solid #e8e8e8;
  --text-bg-normal: #fff;
  --text-bg-hover: #000;
  --title-color-normal: #000;
  --desc-color-normal: #4a4a4a;
  --title-color-hover: #fff;
  --desc-color-hover: #d1d1d1;
  --linkedin-size: 38px;
  --linkedin-bg-normal: #f0f0f0;
  --linkedin-border-normal: 1px solid transparent;
  --linkedin-icon-color-normal: #000;
  --linkedin-bg-hover: #fff;
  --linkedin-border-hover: 1px solid #fff;
  --linkedin-icon-color-hover: #000;
}