Multiple Images Responsive Service Portal Design in ServiceNow with widget code

(Service Portal Design ServiceNow)

HTML:

<div class="wrap">
<h3 style="position: absolute;top: 258px;width: 500px;left: 395px;color: black;">Welcome to Community</h3>
    <input type="text" placeholder="Search" class="form-control" role="textbox" style="position: absolute;top: 316px;width: 500px;left: 300px;color: black;">
    <ul>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
    </ul> 
</div>

CSS:

@import "compass/css3";
@mixin transition($transition...) {
    -moz-transition:    $transition;
    -ms-transition:      $transition;
    -webkit-transition: $transition;
    transition:         $transition;
}
 $bg1: "https://dev32332.service-now.com/b52b92a34744f5100d901d98036d4373.iix";
$bg2: "https://dev32332.service-now.com/b52b92a34744f5100d901d98036d4373.iix";
$bg3: "https://dev32332.service-now.com/b52b92a34744f5100d901d98036d4373.iix";
$bg4: "https://dev32332.service-now.com/b52b92a34744f5100d901d98036d4373.iix";
 body { 
  background: #444;
  display: flex;
  flex-direction: column;
}
 .credits {
  text-align: right;
  margin-top: 15px;
  a {
    color: #222;
    background-color: #f8dc3d;
    font-family: "Segoe UI", "Ubuntu", monospace;
    font-weight: 500;
    text-decoration: none;
    padding: 2px 10px;
    border-radius: 4px
  }
}
 ul {
  list-style: none;
  max-width: 1200px;
  margin: 0 auto;
     li {
    float: left; 
    width: 16.666%; 
    height: 600px;
    opacity: 0.4;
    @include transition(all .5s ease-in-out);
         &:hover,
    &:first-child ~ li:last-child {
      width: 50%;
      opacity: 1;
      @include transition(all .5s ease-in-out);
    }
         &:hover ~ li:last-child {
      width: 16.666%;
      opacity: 0.4;
    }
         &:nth-child(1) {
      background: url($bg1) top center no-repeat;
    }
    &:nth-child(2) {
      background: url($bg2) top right no-repeat;
    }
    &:nth-child(3) {
      background: url($bg3) top center no-repeat;
    }
    &:nth-child(4) {
      background: url($bg4) top center no-repeat;
    }
  }
   } // End ul
 /** Add cool filter efects **/
ul li {
  &::before {
    content: "";
    display:block;
    width:0;
    height:100%;
    @include transition(all .5s ease-in-out);
  }
   &:nth-child(1)::before { background-color: rgba(255, 87, 34, .2)}
  &:nth-child(2)::before { background-color: rgba(76, 175, 80, .25)}
  &:nth-child(3)::before { background-color: rgba(33, 150, 243, .25)}
  &:nth-child(4)::before { background-color: rgba(156, 39, 176, .2)}
}
 input:checked ~ ul li::before { 
  width: 100%;
  @include transition(all .5s ease-in-out);
}
 input[type="checkbox"] {
  width:555px;
  margin: 15px;
  font-family: "Segoe UI", "Ubuntu", monospace;
  color: white;
  &::before { 
    content: "Pure CSS Accordion";
    font-size: 1.5em;
    position: relative;
    top:-10px;
  }
  &::after{
    content: "Filters Enabled";
    color: #caa;
    position: relative;
    top:-10px;
    left: 5px;
  }
}