CSS only: Two div with common background which change on mouse-over one of them

Question

* {
  padding: 0;
  margin: 0;
}

html,
body {
  height: 100%;
}

.body {
  height: 100vh;
  text-align: center;
}

.square {
  width: 100vm;
  height: 100vm;
  /* For IE9 */
  width: 100vmin;
  height: 100vmin;
  display: inline-block;
  vertical-align: middle;
  margin-top: calc((100vh - 100vmin) / 2);
  background-image: url('https://ae01.alicdn.com/kf/HTB12ZJjMXXXXXa_aXXXq6xXFXXXE/3-Piece-Wall-font-b-Picture-b-font-Dreamy-font-b-Purple-b-font-font-b.jpg');
  font-size: 0;
}

.square:before {
  content: "";
  height: 100%;
}

.square:before,
.content {
  display: inline-block;
  vertical-align: middle;
}

@keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}


/* Firefox < 16 */

@-moz-keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}


/* Safari, Chrome and Opera > 12.1 */

@-webkit-keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}


/* Internet Explorer */

@-ms-keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}


/* Opera < 12.1 */

@-o-keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.content {
  -webkit-animation: fadein 1s;
  /* Safari, Chrome and Opera > 12.1 */
  -moz-animation: fadein 1s;
  /* Firefox < 16 */
  -ms-animation: fadein 1s;
  /* Internet Explorer */
  -o-animation: fadein 1s;
  /* Opera < 12.1 */
  animation: fadein 1s;
}

#left-content {
  background-size: cover;
  width: 50vmin;
  height: 100vmin;
  float: left;
}

#right-content {
  background-size: cover;
  width: 50vmin;
  height: 100vmin;
  float: right;
}

#left-content:after {
  background-size: cover;
  width: 50vmin;
  height: 100vmin;
  float: left;
  opacity: 0;
  content: ' ';
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

#right-content:after {
  background-size: cover;
  width: 50vmin;
  height: 100vmin;
  float: right;
  opacity: 0;
  content: ' ';
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

#left-content:hover:after+.square {
  background-image: url('https://ae01.alicdn.com/kf/HTB1EuKlLVXXXXcmXpXXq6xXFXXXd/E-HOME-Stretched-LED-Canvas-Print-Blue-Rose-Flash-Effect-LED-Flashing-font-b-Optical-b.jpg');
  opacity: 1;
}

#right-content:hover:after {
  background-image: url('https://ae01.alicdn.com/kf/HTB12hyVPVXXXXbEaXXXq6xXFXXX8/-font-b-Canvas-b-font-Painting-Printed-Pictures-Paints-Wall-Hanging-font-b-Canvas-b.jpg');
  opacity: 1;
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <div class="body">
    <div class="square">
      <div class="content">
        <a href="">
          <div id="left-content"></div>
        </a>
        <a href="">
          <div id="right-content"></div>
        </a>
      </div>
    </div>
  </div>
</body>

</html>

I would like to do the following.

DIV container contains two DIV (1 and 2). When mouse is over DIV 1, the background image of DIV CONTAINER change to image1. When mouse is over DIV 2, the background image of DIV CONTAINER change to image2.

I would like to try this with only CSS.

I tried your example using my design but it doesn't work. Will continue to investigate. — yoan26, May 02 '17 at 07:29
I think this is not possible. You need the ':has' selector, which is not supported by any browser at this time. [http://caniuse.com/#feat=css-has](http://caniuse.com/#feat=css-has) — Huelfe, May 02 '17 at 07:33

score 1 · Answer 1 · answered May 02 '17 at 08:03

So it is actually possible with pseudo elements. Have a look at my example.

body, html {
  margin: 0;
  padding: 0;
  height: 100%;
}

#main:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

#main {
  height: 170px;
  border: 1px solid black;
  box-sizing: border-box;
  position: relative;
}

#div1 .show {
  border-right: 1px solid black;
}

#div1:hover:before, #div2:hover:before {
  position: absolute;
  width: 100%;
  height: 100%;
  content: "";
  left: 0;
  top: 0;
  z-index: 1;
  pointer-events: none;
}

#div1:hover:before {
  background: yellow;
}

#div2:hover:before {
  background: green;
}

#div1, #div2 {
  width: 50%;
  display: block;
  float: left;
  text-align: center;
  vertical-align: center;
  box-sizing: border-box;
  pointer-events: auto;
}

.show {
  position: relative;
  z-index: 2;
  height: 168px;
}

<div id="main">
  <div id="div1">
    <div class="show">
      div1
    </div>
  </div>
  <div id="div2">
    <div class="show">
      div2
    </div>
  </div>
</div>

score 0 · Accepted Answer · answered May 02 '17 at 07:57

body { width: 100%; margin: 0; padding: 0; }
.container {
  position: relative;
  display: flex;
  width: 100vw;
  height: 100vh;
}
.div1, .div2 {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  width: 50%;
  height: 100%;
  font-size: 24px;
  font-weight: bold;
  text-shadow: 0 0 10px black;
  color: hsla(0, 57.6%, 50%, 0.5);
  background-color: hsla(0, 0%, 0%, 0.1);
}
.background1, .background2 {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  display: none;
  z-index: -1;
}
.background1 {
  background: url("http://i.imgur.com/zFYHM67.jpg");
  background-repeat:no-repeat;
  background-size: cover;
}
.background2 {
  background: url("http://i.imgur.com/nYKEFNF.jpg");
  background-repeat:no-repeat;
  background-size: cover;
}
.div1:hover ~ .background1 {
  display: flex;
}
.div2:hover ~ .background2 {
  display: flex;
}

<div class="container">
  <div class="div1">Div 1</div>
  <div class="background1"></div>
  <div class="div2">Div 2</div>
  <div class="background2"></div>
</div>

fiddle

https://jsfiddle.net/Hastig/k652snyc/

Thanks! even better with background-image concept :) – yoan26 May 02 '17 at 08:09 — yoan26, May 02 '17 at 08:09

CSS only: Two div with common background which change on mouse-over one of them

2 Answers2