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

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  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  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>

CodePudding user response：

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 >
              <div >
                <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 >
              <div >
                <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>