'Why is there space between the img and the button and why doesn't the hover animation work?

When I run the file below, there is space between the img and the the button, why and how do I fix this issue?

Plus there seems to be no animation when I hover the div, but the cursor does change shape so why don't the other CSS rules work too? The transform: rotateY: (360deg); actually seems to work a little bit, but it looks like it only did very little.

body {
  margin: 0%;
}

#Homepage {
  margin: 5%;
  font-family: sans-serif;
}

#Homepage .selection {
  width: 40%;
  position: relative;
  display: flex;
  flex-direction: column;
  border: 5px solid;
  border-radius: 20px;
  overflow: hidden;
}

#Homepage .selection :hover {
  cursor: pointer;
  bottom: 100;
  transform: rotateY(360deg);
}

#Homepage .selection img {
  box-sizing: border-box;
  width: 100%;
}

#Homepage .selection button {
  width: 100%;
    height: 100px;
  border: none;
}
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body>
        <div id="Homepage">
            <div class="selection" style="float: left;">
                <a href="#" onclick="show(SecondAttempt, Homepage);">
                    <img src="https://via.placeholder.com/200x100.png?text=Lorem+Ipsum" alt="Preview of my second attempt to make a game">
                    
                    <button type="button"><h2><strong>2nd attempt to make a game</strong></h2></button>
                </a>
            </div>

            <div class="selection" style="float: right;">
                <a href="#" onclick="show(ScrollingTest, Homepage);">
                    <img src="https://via.placeholder.com/200x100.png?text=Lorem+Ipsum" alt="Preview of my second attempt to make a game">
                    
                    <button type="button"><h2><strong>Scrolling Test</strong></h2></button>
                </a>
            </div>
        </div>
    </body>
</html>
htmlcssflexboxcss-animations


Solution 1:[1]

To remove the space, add display: block; to the image

As of animation, I'm not quiet sure what animation supposed to be, and since you don't have any transition affects for tranform, the rotateY(360deg) simply rotates element to it's original state without any visual change.

body {
  margin: 0%;
}

#Homepage {
  margin: 5%;
  font-family: sans-serif;
}

/* Note, added new DIV.inner container in HTML, without it, animation glitches when cursor is moving */
#Homepage .selection > .inner {       /* changed */
  width: 100%;                        /* changed */
  position: relative;
  display: flex;
  flex-direction: column;
  border: 5px solid;
  border-radius: 20px;
  overflow: hidden;
}
                                      /* added */
#Homepage .selection {
  width: 40%;
}


                                      /* added */
/* uncomment this if you want reverse animation when cursor moves away */
/*
#Homepage .selection > .inner {       
  transition: transform 1s;  
}
*/

#Homepage .selection:hover > .inner { /* changed */
  cursor: pointer;
  bottom: 100;                        /* wrong value */
  transition: transform 1s;           /* added */
  transform: rotateY(360deg);
}

#Homepage .selection img {
  box-sizing: border-box;
  width: 100%;
  display: block;                     /* added */
}

#Homepage .selection button {
  width: 100%;
    height: 100px;
  border: none;
}

@keyframes left {
  from {right: 10%;}
  to {right: 0;}
}

@keyframes right {
  from {left: 10%;}
  to {left: 0px;}
}

                                   /* added */
.selection.left
{
  float: left;
}

.selection.right
{
  float: right;
}
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body>
        <div id="Homepage">
            <div class="selection left">
              <div class="inner">
                <a href="#" onclick="show(SecondAttempt, Homepage);">
                    <img src="https://via.placeholder.com/200x100.png?text=Lorem+Ipsum" alt="Preview of my second attempt to make a game">
                    
                    <button type="button"><h2><strong>2nd attempt to make a game</strong></h2></button>
                </a>
              </div>
            </div>

            <div class="selection right">
              <div class="inner">
                <a href="#" onclick="show(ScrollingTest, Homepage);">
                    <img src="https://via.placeholder.com/200x100.png?text=Lorem+Ipsum" alt="Preview of my second attempt to make a game">
                    
                    <button type="button"><h2><strong>Scrolling Test</strong></h2></button>
                </a>
              </div>
            </div>
        </div>
    </body>
</html>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1

Related Questions