actor slider

by Craig Martin

HTML

<div class="sl_container">


<div class="talent_container" style="background-position-y:-10px; background-position-x:0px; background-image: url(https://www.hollywoodtechshop.com/podscribe/wp-content/uploads/2021/08/Meghan-Reinks-2020-1-scaled.jpg);">
  <div class="talentimg"></div>
  <div class="talentname"><h4>Meghan Rienk</h4></div>
  <div class="talent_sudu"><h4>Rose</h4></div>
</div>

<div class="talent_container" style="background-position-y:0;background-position-x: -27px;background-image: url(https://www.hollywoodtechshop.com/podscribe/wp-content/uploads/2021/08/JudyGreer.png);">
  <div class="talentimg"></div>
  <div class="talentname"><h4>Judy Greer</h4></div>
  <div class="talent_sudu"><h4>CJ</h4></div>
</div>

<div class="talent_container" style="background-position-y: -16px;background-position-x: 0px;background-image: url(https://www.hollywoodtechshop.com/podscribe/wp-content/uploads/2021/08/Maxgreenfield-1.jpeg);background-size: 119px;">
  <div class="talentimg"></div>
  <div class="talentname"><h4>Max Greenfield</h4></div>
  <div class="talent_sudu"><h4>Devin</h4></div>
</div>

<div class="talent_container" style="background-position-y:0px;background-position-x: 13px;background-image: url(https://www.hollywoodtechshop.com/podscribe/wp-content/uploads/2021/08/michael-trevino-1.jpg);background-size: 95px;">
  <div class="talentimg"></div>
  <div class="talentname"><h4>Michael Trevino</h4></div>
  <div class="talent_sudu"><h4>Cliff</h4></div>
</div>

<div class="talent_container" style="background-position-y: 0px;background-position-x: -15px;background-image: url(https://www.hollywoodtechshop.com/podscribe/wp-content/uploads/2021/08/Jackie-Clarke.jpg);background-size: 143px;">
  <div class="talentimg"></div>
  <div class="talentname"><h4>Jackie Clark</h4></div>
  <div class="talent_sudu"><h4>Brandi</h4></div>
</div>

<div class="talent_container" style="background-position-y:0;background-position-x: 1px;background-image:...

CSS

.sl_container {
align-items: center;
    display: flex;
    justify-content: flex-start;
    overflow-x: scroll;
    overflow-y: hidden;
    padding-bottom: 40px !important;
    min-height: 170px !important;
    margin-top: 30px !important;
}
.talentimg, .talentname {
width:100%;
display:block;
clear:both;
}
.talentimg {
  min-width:120px !important;
}
.talentname {
  text-align:center;
  font-size:20px !important;
position:relative;
bottom:-125px !important;
width:100% !important;
}
.talentname h4 {
    font-family: Noto Serif light!important;
    font-size:3.8vw !important;
}
.talent_sudu {
    text-align: center;
    position: relative;
    bottom: -120px !important;
    width: 120px !important;
}
.talent_sudu h4 {
    font-family: Noto Serif light!important;
    color: #919bb5 !important;
    font-size:3.3vw !important;
}
.talent_container {
		margin: 3px !important;
    border-radius: 50%;
    width: 120px !important;
    height: 120px !important;
    background-size: cover;
}