Tiggles ツ of Speak Creative
11/28/2018 - 5:43 PM

Hover element changes background wallpaper

Hover element changes background wallpaper

body.default.locations {
  html {
  font-size: 20px;
}
@media (max-width: 768px) {
  html {
    font-size: 18px;
  }
}
h1 {
  font-size: 2.48832em;
  text-align: center;
  margin-bottom: 2rem;
  line-height: 1.2;
}
@media (max-width: 768px) {
  h1 {
    font-size: 1.728em;
    margin-bottom: 4%;
  }
}
h2 {
  color:white;
}
body {
  line-height: 1.4;
}
iframe {
    display: table-cell;
    background-position: center;
    overflow: hidden;
    width: 100%;
    margin: 10px 0;
    height: auto;
}
.large-container {
  max-width: 1100px;
  width: 100%;
  margin: 0 auto;
  display: table;
  position: relative;
}
@media (max-width: 768px) {
  .large-container {
    max-width: 30em;
    display: block;
  }
}
.richText-container {
  max-width: 30em;
  width: 95%;
  margin: 0 auto;
  clear: left;
  margin-top: 2em;
}
@media (max-width: 768px) {
  .richText-container {
    padding-top: 4%;
    margin-top: 0;
  }
}
@media (max-width: 768px) {
  .locations-panel {
    min-width: initial;
    display: inline-block;
    width: 100%;
    margin-top: 50vh;
  }
}
.batonrouge-container, .ascension-container, .espanol-container {
  min-width: 2.2em;
  width: 300px;
  vertical-align: middle;
  color: white;
  min-height:584px;
  background: rgba(47,47,47,.8);
  display: block;
  margin: 20px auto;
  -webkit-transition: all 200ms ease-in;
  -webkit-transform: scale(1); 
  -ms-transition: all 200ms ease-in;
  -ms-transform: scale(1); 
  -moz-transition: all 200ms ease-in;
  -moz-transform: scale(1);
  transition: all 200ms ease-in;
  transform: scale(1); 
  &:hover {
    box-shadow: 0px 0px 60px rgba(0,0,0,.5);
    z-index: 2;
    -webkit-transition: all 200ms ease-in;
    -webkit-transform: scale(1.1);
    -ms-transition: all 200ms ease-in;
    -ms-transform: scale(1.1);   
    -moz-transition: all 200ms ease-in;
    -moz-transform: scale(1.1);
    transition: all 200ms ease-in;
    transform: scale(1.1);
  }
} 
div.location,
.hours {
  max-width: 70%;
  /*width: 100%;*/
  margin: 0 auto;
  padding: 2em 0;
}
.hours {
  padding-top: 0;
}
div.location {
  text-align: center;
}
div.location > span {
  display: block;
  font-size: 1em;
}
div.location a {
  display: inline-block;
  margin-top: .6rem;
}
@media (max-width: 768px) {
  div.location {
    text-align: center;
  }
}
table {
  border-collapse: collapse;
  width: 100%;
  border: 5px solid #005757;
}
@media (max-width: 768px) {
  table {
    margin: 0 auto;
  }
}
table td,
table .multiple-hour-set + .single-hour-set {
  padding: 5px;
  border-style: solid;
  border-width: 0px;
  background-color: #005757;
  color: #ffffff;
}
table tr:nth-of-type(even) td {
  background-color: #006c6c;
}
table tr:nth-of-type(even) ~ .multiple-hour-set td {
  background-color: #005757;
}
table tr:nth-of-type(odd) ~ .multiple-hour-set td {
  background-color: #006c6c;
}
table .multiple-hour-set td {
  border-color: transparent;
}
table .multiple-hour-set ~ .multiple-hour-set td {
  padding: 0 0px 5px 3px;
}
table .multiple-hour-set + .single-hour-set td {
  border-top: 2px solid #005757;
}
table .current-day td {
  font-weight: bold;
  background: white;
  color: #000000;
}
a.button {
    background: #00cccd;
    color: #000000;
    text-align: center;
    line-height: 0;
    text-transform: none !important;
    font-size: .9em !important;
    letter-spacing: 0 !important;
    width: 100%;
    max-width: 100%;
    /* min-width: 49%; */
    padding: 15px 0;
    /* font-size: 16px!important; */
}
a.button span {
  padding-left: 2px;
  display: inline-block;
  vertical-align: middle;
}
a.button svg {
  height: 1.2em;
  width: 1.2em;
  vertical-align: middle;
  display: inline-block;
}
a.button svg path {
  fill: #000000;
}
.locations-panel {
  margin: 80px auto;
}
#wallpaper {
  position: fixed;
  z-index: -1;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  transition: .25s;
  pointer-events: none;
}
div.batonrouge-container:hover ~ #wallpaper {
  background-image: url("/SiteFiles/2465/css/images/test.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  -webkit-transition: all 200ms ease;
  -ms-transition: all 200ms ease;
  -moz-transition: all 200ms ease;
  transition: all 200ms ease;
  /*background: blue;*/
  -webkit-animation: fadein 200ms; /* Safari, Chrome and Opera > 12.1 */
  -moz-animation: fadein 200ms; /* Firefox < 16 */
  -ms-animation: fadein 200ms; /* Internet Explorer */
  -o-animation: fadein 200ms; /* Opera < 12.1 */
  animation: fadein 200ms;
  }
  @keyframes fadein {
  from { opacity: 0; }
  to   { opacity: 1; }
  }
  @-moz-keyframes fadein {
  from { opacity: 0; }
  to   { opacity: 1; }
  }
  @-webkit-keyframes fadein {
  from { opacity: 0; }
  to   { opacity: 1; }
  }
  @-ms-keyframes fadein {
  from { opacity: 0; }
  to   { opacity: 1; }
  }
  @-o-keyframes fadein {
  from { opacity: 0; }
  to   { opacity: 1; }
  }


div.espanol-container:hover ~ #wallpaper {
  background-image: url("https://images-na.ssl-images-amazon.com/images/I/81ep8rBNqFL._SX466_.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  -webkit-transition: all 200ms ease;
  -ms-transition: all 200ms ease;
  -moz-transition: all 200ms ease;
  transition: all 200ms ease;
  /*background: blue;*/
  -webkit-animation: fadein 200ms; /* Safari, Chrome and Opera > 12.1 */
  -moz-animation: fadein 200ms; /* Firefox < 16 */
  -ms-animation: fadein 200ms; /* Internet Explorer */
  -o-animation: fadein 200ms; /* Opera < 12.1 */
  animation: fadein 200ms;
  /*background: blue;*/
}

div.ascension-container:hover ~ #wallpaper {
  background-image: url("//schmoesknow.com/wp-content/uploads/2013/07/Nicolas-Cage-nicolas-cage-26969943-1982-1300.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  -webkit-transition: all 200ms ease;
  -ms-transition: all 200ms ease;
  -moz-transition: all 200ms ease;
  transition: all 200ms ease;
  /*background: blue;*/
  -webkit-animation: fadein 200ms; /* Safari, Chrome and Opera > 12.1 */
  -moz-animation: fadein 200ms; /* Firefox < 16 */
  -ms-animation: fadein 200ms; /* Internet Explorer */
  -o-animation: fadein 200ms; /* Opera < 12.1 */
  animation: fadein 200ms;
  }

h2#campus-name {
  min-height:70px;
  font-size:28px;
}



} /*end the location page styling*/
 <div class="richText-container">
    <h1>Campuses</h1>
  </div> 
 <div class="locations-container"> 
	 <div class="container">
		 <div class="row">
			 <div class="col-md-4">
				  <div class="large-container">
				      <div class="batonrouge-container"> 
				       <div class="location">
				       <a href="/baton-rouge"><h2 id="campus-name">Baton Rouge</h2></a>
				       <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3440.3899812527716!2d-91.07318194869958!3d30.42504488165577!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x8626a4a439ec1089%3A0x80b76093a82fcc3b!2s10500+Sam+Rushing+Dr%2C+Baton+Rouge%2C+LA+70816!5e0!3m2!1sen!2sus!4v1497996140008" width="150" height="150" frameborder="0" style="border:0" allowfullscreen></iframe>
				         <span>10500 Sam Rushing Drive</span>
				         <span>Baton Rouge, LA 70816</span>
				         
				         <a href="https://www.google.com/maps/place/Istrouma+Baptist+Church/@30.4248876,-91.0729781,17z/data=!4m13!1m7!3m6!1s0x8626a4a439ec1089:0x80b76093a82fcc3b!2s10500+Sam+Rushing+Dr,+Baton+Rouge,+LA+70816!3b1!8m2!3d30.4250449!4d-91.0709879!3m4!1s0x8626a4a46ef7e395:0x357716aa464aee6f!8m2!3d30.4244692!4d-91.0706968" class="button">Directions</a>
				         <a  href="tel:2252950775" class="button">(225) 295-0775</a>
				       </div>
				      <div class="hours">
				        <table>     
				          <tr class="multiple-hour-set">
				            <td>Sunday</td>
				            <td>9:15 am</td>
				          </tr>
				          <tr class="multiple-hour-set" > 
				            <td></td>
				            <td>10:45 am </td>
				          </tr>  
				        </table>
				      </div>
				    </div> <!-- ending the batonrouge-container -->
				    <div id="wallpaper"></div> <!-- ending the wallpaper wrapper -->

				   </div> <!-- ending the large-container -->

				</div>
				<div class="col-md-4">
				  <div class="large-container">
				      <div class="ascension-container"> 
				       <div class="location">
				       <a href="/ascension"><h2 id="campus-name">ascension</h2></a>
				       <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3444.0675464250194!2d-90.95195208450833!3d30.32059648178265!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x5a0761ead6c00ee4!2sIstrouma+Baptist+Church+-+Ascension+Campus!5e0!3m2!1sen!2sus!4v1498050357922" width="400" height="300" frameborder="0" style="border:0" allowfullscreen></iframe>
				         <span>39258 LA Hwy 42</span>
				         <span>Praireville, LA 70769</span>
				         
				         <a href="https://www.google.com/maps/place/Istrouma+Baptist+Church+-+Ascension+Campus/@30.3205965,-90.9519521,17z/data=!4m13!1m7!3m6!1s0x8626b77387ce3da1:0x4bac1dac6d9308d3!2s39248+LA-42,+Prairieville,+LA+70769!3b1!8m2!3d30.3205965!4d-90.9497634!3m4!1s0x0:0x5a0761ead6c00ee4!8m2!3d30.3211909!4d-90.9477304" class="button">Directions</a>
				         <a  href="tel:2252950775" class="button">(225) 295-0775</a>
				       </div>
				      <div class="hours">
				        <table>     
				          <tr class="multiple-hour-set">
				            <td>Sunday</td>
				            <td>10:45 am</td>
				          </tr>
				        </table>
				      </div>
				    </div>
				    <div id="wallpaper"></div> <!-- ending the wallpaper wrapper -->

				   </div>
				</div>
				<div class="col-md-4">
				  <div class="large-container">
				      <div class="espanol-container"> 
					       <div class="location">
					       		<a href="/espanol"><h2 id="campus-name">ISTROUMA EN ESPA&ntilde;OL</h2></a>
					       		<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3440.3899812527716!2d-91.07318194869958!3d30.42504488165577!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x8626a4a439ec1089%3A0x80b76093a82fcc3b!2s10500+Sam+Rushing+Dr%2C+Baton+Rouge%2C+LA+70816!5e0!3m2!1sen!2sus!4v1497996140008" width="150" height="150" frameborder="0" style="border:0" allowfullscreen></iframe>
					         	<span>10500 Sam Rushing Drive</span>
					         	<span>Baton Rouge, LA 70816</span>
					         	<a href="https://www.google.com/maps/place/Istrouma+Baptist+Church/@30.4248876,-91.0729781,17z/data=!4m13!1m7!3m6!1s0x8626a4a439ec1089:0x80b76093a82fcc3b!2s10500+Sam+Rushing+Dr,+Baton+Rouge,+LA+70816!3b1!8m2!3d30.4250449!4d-91.0709879!3m4!1s0x8626a4a46ef7e395:0x357716aa464aee6f!8m2!3d30.4244692!4d-91.0706968" class="button">Directions</a>
					         <a href="tel:2252950775" class="button">(225) 295-0775</a>
					       </div>
					      <div class="hours">
				      		  <table>     
				          		<tr class="multiple-hour-set">
				            	<td>Sunday</td>
				            	<td>10:45 am</td>
				          		</tr>
				          	</table>
				      	  </div>
				      </div>
				    <div id="wallpaper"></div> <!-- ending the wallpaper wrapper -->
				   </div> <!-- ending of .large-container -->
				</div> <!-- ending of col-md-4 -->
			</div>
		</div>
	</div> <!-- ending the locations panel wrapper -->