How to change the iframe height on hover?

Question

I try to make the iframe appear ONLY when I hover the blue part, or the iframe itself when it appears. The height should be modified between hovered and not hovered state. The issue is that it keeps the iframe height value and I didn't succeed to change it. I tried with % and container but probably not properly. The div should not be expanded when I hover the red part. Thanks.

Screenshot

Code : https://codepen.io/gschurck/pen/VwamqKy

.iframe1 { height: 10px; opacity: 0; transition: opacity 0.5s ease-in-out, height s; }

FluffyKitten · Accepted Answer · 2020-08-23T17:47:57.870

The problem is that height:10px in your .iframe1 isn't working - if you remove the opacity:0 from that element you will see that it is still 700px, it was just being hidden by the opacity.

Instead use max-height to control the changing height on the iframe div. Also FYI you cannot use CSS transitions on height when the height is set to auto, they don't work. Instead you can set a max-height to let the div use whatever height it needs, but still has a value for the transition to work.

These are the changes you need:

.iframe1 {
  height: 10px;
  max-height: 10px;   /* Add this to match the height value */
  opacity: 0;
  transition: opacity 0.5s ease-in-out, max-height 1s; /* change height to max-height */
}
.nymeria:hover .iframe1 {
  height: 700px;
  max-height: 700px;   /* Add this to match the height value */
  opacity: 1;
  transition: 0s max-height, opacity 1s ease-in-out 0.2s;
}

Working Snippet:

@import url("https://fonts.googleapis.com/css2?family=Raleway:wght@200&display=swap");

body {
  text-align: center;
  color: white;
  background-color: #181a1c;
  font-family: Raleway;
}

h1 {
  font-size: 70px;
}

hr {
  width: 100%;
  border: 0;
  height: 1px;
  background-image: linear-gradient(
    to right,
    rgba(0, 0, 0, 0),
    white,
    rgba(0, 0, 0, 0)
  );
}

.iframe1 {
  height: 10px;
  max-height:10px;
  opacity: 0;
  transition: opacity 0.5s, max-height 1s, height 1s;
}

.nymeria {
  overflow: visible;
  max-height: 200px;
  transition: max-height 0.1s ease-in-out 0.5s;
  background-color: blue;
}

.nymeria:hover {
  max-height: 1000px;
}

.nymeria:hover .iframe1 {
  height: 700px;
  max-height:700px;
  opacity: 1;
}

<!DOCTYPE html>
<html lang="fr">

<head>
  <title>G</title>
  <link rel="stylesheet" type="text/css" href="index.css">
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body>
  <h1>G</h1>
  <div class="reseaux">
    <div>
      <h2>Mes projets</h2>
      <div class="nymeria">
        <div>
          <h3>Site web de l'association esport Nymeria</h2>
            <div>
              Aperçu
            </div>
            <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="50" height="50" viewBox="0 0 172 172" style=" fill:#000000;">
              <g fill="none" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal">
                <path d="M0,172v-172h172v172z" fill="none"></path>
                <g fill="#ffffff">
                  <path d="M47.3,18.77891v119.52656l30.83906,-21.61758l19.9127,39.46426l19.60195,-10.12012l-20.60137,-38.12891l38.51524,-8.50762l-3.05703,-2.78828zM51.6,28.52109l74.94766,68.46406l-35.97891,7.93652l21.22285,39.29629l-11.85859,6.12246l-20.18984,-40.02695l-28.14316,19.72793zM60.2,51.6c-1.18418,0 -2.15,0.96582 -2.15,2.15c0,1.18418 0.96582,2.15 2.15,2.15c1.18418,0 2.15,-0.96582 2.15,-2.15c0,-1.18418 -0.96582,-2.15 -2.15,-2.15zM60.2,60.2c-1.18418,0 -2.15,0.96582 -2.15,2.15c0,1.18418 0.96582,2.15 2.15,2.15c1.18418,0 2.15,-0.96582 2.15,-2.15c0,-1.18418 -0.96582,-2.15 -2.15,-2.15zM60.2,68.8c-1.18418,0 -2.15,0.96582 -2.15,2.15c0,1.18418 0.96582,2.15 2.15,2.15c1.18418,0 2.15,-0.96582 2.15,-2.15c0,-1.18418 -0.96582,-2.15 -2.15,-2.15zM60.2,77.4c-1.18418,0 -2.15,0.96582 -2.15,2.15c0,1.18418 0.96582,2.15 2.15,2.15c1.18418,0 2.15,-0.96582 2.15,-2.15c0,-1.18418 -0.96582,-2.15 -2.15,-2.15zM60.2,86c-1.18418,0 -2.15,0.96582 -2.15,2.15c0,1.18418 0.96582,2.15 2.15,2.15c1.18418,0 2.15,-0.96582 2.15,-2.15c0,-1.18418 -0.96582,-2.15 -2.15,-2.15zM60.2,94.6c-1.18418,0 -2.15,0.96582 -2.15,2.15c0,1.18418 0.96582,2.15 2.15,2.15c1.18418,0 2.15,-0.96582 2.15,-2.15c0,-1.18418 -0.96582,-2.15 -2.15,-2.15zM60.2,103.2c-1.18418,0 -2.15,0.96582 -2.15,2.15c0,1.18418 0.96582,2.15 2.15,2.15c1.18418,0 2.15,-0.96582 2.15,-2.15c0,-1.18418 -0.96582,-2.15 -2.15,-2.15zM60.2,111.8c-1.18418,0 -2.15,0.96582 -2.15,2.15c0,1.18418 0.96582,2.15 2.15,2.15c1.18418,0 2.15,-0.96582 2.15,-2.15c0,-1.18418 -0.96582,-2.15 -2.15,-2.15z"></path>
                </g>
              </g>
            </svg>
        </div>
        <iframe class="iframe1" title="Inline Frame Example" width="1500" height="700" src="https://gschurck.github.io/nymeria-website">
        </iframe>
      </div>
      <hr>
    </div>

</body>

</html>

Thanks ! That was almost giving me a headache. But now I don't succeed to add again the exit animation of the hover. I don't master completely the "transition" syntax, to make a transition appear after another on the same class. And also the fact that the delay has to be changed between the enter and exit animation. I thought I understood how to do it but it's not working anymore.. — Grum, Aug 22 '20 at 15:58
@Grum Sorry, I left out one part of the `transition` on the `.iframe1` class - take a look anow, it should be working. — FluffyKitten, Aug 22 '20 at 17:36
No problem, thanks for the help ! You said we can't use CSS transitions on height, but `transition: height 1s;` is working ? — Grum, Aug 22 '20 at 22:32
@Grum Sorry, I wasn't very clear - you cannot transition to *auto* height, you have to set a specific value for height. In your case we've set a max-height gives the browser a specific value to use to calculate the transition, bur which also lets the divs have auto height. You can find out more in this question in you're interested! [How can I transition height: 0; to height: auto; using CSS?](https://stackoverflow.com/questions/3508605/how-can-i-transition-height-0-to-height-auto-using-css) — FluffyKitten, Aug 23 '20 at 17:46

How to change the iframe height on hover?

1 Answers1