css FMG旋转器图像替换

Posted 2021-05-13

/** HERO ROTATOR **/
/** Place any CSS code in this section that changes or modifies the Hero Rotator #hero **/
#hero{
  background: none;
  color: inherit;
  height: auto;
}
#hero .container {
  height: 500px;
  width: 100%;
  padding: 0;
}
#hero .container a img{
  width: 100%;
  height: 500px;
}
#hero .container #hero1 img {
  background: url('https://s3.amazonaws.com/PlatinumStrategies/PWS/members/dochinez/dochinez-rotator-farm.jpg') no-repeat center center !important;
  background-size: cover !important;
}
#hero .container #hero2 img {
  background: url('https://s3.amazonaws.com/PlatinumStrategies/PWS/members/dochinez/dochinez-rotator-waterfalls.jpg') no-repeat center center !important;
  background-size: cover !important;
}
#hero .container #hero3 img {
  background: url('https://s3.amazonaws.com/PlatinumStrategies/PWS/members/dochinez/dochinez-rotator-sunset.jpg') no-repeat center center !important;
  background-size: cover !important;
}
#hero .container #hero4 img {
  background: url('https://s3.amazonaws.com/PlatinumStrategies/PWS/members/dochinez/dochinez-rotator-fence.jpg') no-repeat center center !important;
  background-size: cover !important;
}
#hero .backArrow, #hero .forwardArrow {
  font-family: FontAwesome;
  font-weight: normal;
  font-style: normal;
  font-size: 80px;
  padding: 10px;
  color: #FFF;
  height: 98px;
  width: auto;
  top: 185px;
  background: none;
  text-shadow: 0 1px 1px #333;
  z-index: 20;
}
#hero .backArrow {
  /*left: 0px;*/
}
#hero .forwardArrow {
  right: 10px;
  left: auto;
}
#hero .backArrow:before {
  content: "\f104";
}
#hero .forwardArrow:before {
  content: "\f105";
}
#hero:hover .backArrow, #hero:hover .forwardArrow {
  opacity: 0.75;
  visibility: visible;
}
#hero:hover .backArrow:hover, #hero:hover .forwardArrow:hover {
  opacity: 1;
  text-decoration: none;
}


/** HERO ROTATOR ASIDE **/
/** Place any CSS code in this section that changes or modifies the Hero Rotator #hero aside or wrapper **/
#hero aside {
  position: absolute;
  margin: 0;
  width: 100%;
}
#hero aside .wrapper {
  padding: 20px;
  width: 330px;
  color: #fff;
}
#hero aside h2{
  color: inherit;
  background: none;
}
#hero aside a + a {
  display: none;
}