CODEWITHSUNDEEP
cssflexboxcss-transitions
yoan26
yoan26

Reputation: 71

Issue with CSS and display flex

I have an issue with my CSS based page. I would like to change the background-image on mouse-over the two div and point to another page when click. I have 3 issues:

  1. The change of background works fine when the screen is in portrait resolution but not in landscape.
  2. I would like to have a fade animation on the background change but I couldn't figure out how.
  3. I would need div1 and div2 to be link so that not only the background change, it also point to another page if user click. I couldn't add on the div without blocking the flex display.

Thank you!

* {
  padding: 0;
  margin: 0;
}

html,
body {
  height: 100%;
  text-align: center;
}

@media screen and (orientation:landscape) {
  .container {
    position: absolute;
    display: flex;
    width: 75vmin;
    height: 100vmin;
    top: 50%;
    left: 50%;
    transform: translate3d(-50%, -50%, 0);
  }
  .div1,
  .div2 {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    width: 32.5vmin;
    height: 100vmin;
    background-color: #ddd;
  }
}

@media screen and (orientation:portrait) {
  .container {
    position: absolute;
    display: flex;
    width: 100vmin;
    height: 133vmin;
    top: 50%;
    left: 50%;
    transform: translate3d(-50%, -50%, 0);
  }
  .div1,
  .div2 {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    width: 50vmin;
    height: 133vmin;
    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;
}
<!DOCTYPE html>
<html>

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

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

</html>

Upvotes: 1

Views: 1941

Answers (1)

Chiller
Chiller

Reputation: 9738

I made some changes in your code (mainly css) see the snippet below:

for issue 1 : you were using @media screen and (orientation:portrait) so the style inside only works for portrait

for issue 2 : i used opacity and transition to have an animation effect

for issue 3: i just changed div tag to a tag

* {
  padding: 0;
  margin: 0;
}

html,
body {
  height: 100%;
  text-align: center;
}

@media screen and (orientation:landscape) {
  .container {
    position: absolute;
    display: flex;
    width: 75vmin;
    height: 100vmin;
    top: 50%;
    left: 50%;
    transform: translate3d(-50%, -50%, 0);
  }
  .div1,
  .div2 {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    width: 32.5vmin;
    height: 100vmin;
    background-color: #ddd;
  }
}

.container {
  position: absolute;
  display: flex;
  width: 100vmin;
  height: 100vmin;
  top: 50%;
  left: 50%;
  transform: translate3d(-50%, -50%, 0);
}

.div1,
.div2 {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  width: 50vmin;
  height: 100vmin;
  background-color: hsla(0, 0%, 0%, 0.1);
}

.background1,
.background2 {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  opacity: 0;
  z-index: -1;
  transition: all 1s;
}

.background1 {
  background: url("https://www.w3schools.com/css/img_fjords.jpg");
  background-repeat: no-repeat;
  background-size: cover;
}

.background2 {
  background: url("https://www.w3schools.com/howto/img_mountains.jpg");
  background-repeat: no-repeat;
  background-size: cover;
}

.div1:hover~.background1 {
  display: flex;
  opacity: 1;
}

.div2:hover~.background2 {
  display: flex;
  opacity: 1;
}
<div class="container">
  <a href="#" class="div1">Div 1</a>
  <div class="background1"></div>
  <a href="#" class="div2">Div 2</a>
  <div class="background2"></div>
</div>

Upvotes: 1

Related Questions