Element top height?

I was practicing with some colors, shapes and effects yestarday and I’ve run into this problem. I was trying to add a hover condition to one of the shapes to display a text. It worked when the cursor was above and below the text but when hovered above it will not display it.
HTML:

<!DOCTYPE html>
    <html>
        <head>
            <title>Shapes</title>
            <meta charset="UTF-8">
            <meta name="author" content="Tom">
            <meta name="description" content="CSS color and shape applications">
            <meta name="keywords" content="css, colors, design, shapes">
            <link crossorigin="anonymous">
            <link rel="stylesheet" href="main.css" type="text/css">
        </head>
        <body>
            <div class="square">
            </div>
            <div class="square1"></div>
            <div class="square2" id="square2"></div>
            <div class="rectangle">
                <!-- <p class="rectangle_d">rectangle</p> -->
                <p class="rectangle_d1">under construction</p>
            </div>
            <div id="circle" class="circle">
                <p class="circle_d">circle</p>
            </div>
            <div class="heart"></div>
        </body>
    </html>

CSS:

.square {
    position: absolute;
    top: 0;
    bottom: 50%;
    left: 0;
    right: 0;
    margin:auto;
    width: 5em;
    height: 5em;
    background-color: #ff0000;
    border-radius: 20px;
}
.square1 {
    position:absolute;
    top: 0;
    bottom: 25%;
    left: 0;
    right: 0;
    margin:auto;
    width: 5em;
    height: 5em;
    background-color: #00ffff;
    border-radius: 20px;
}
.square2 {
    position:absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    width: 5em;
    height: 5em;
    background-color: #ff7f00;
    border-radius: 20px;
}
.rectangle {
    position: absolute;
    top: 0;
    bottom: 50%;
    left: 0;
    right: 51.5%;
    margin:auto;
    width: 7em;
    height: 5em;
    background-color: #fbff00;
    border-radius: 20px;
}
/** the gradient **/
.rectangle:hover {
    background: repeating-linear-gradient(
        45deg,
        #fbff00 0%,
        #fbff00 5%,
        #a1a1a1 5%,
        #a1a1a1 10%
        );
}
/** rectangle text **/
p.rectangle_d1 {
    height: 70px;
    position: relative;
    margin: auto;
    text-align: center;
    top:25%;
    opacity: 0;
}
.rectangle_d1:hover {
    opacity: 1;
    display: block;
}
.circle {
    position: absolute;
    top:0;
    bottom:50%;
    left:46.6%;
    right:0;
    margin:auto;
    width:5em;
    height:5em;
    background-color: #0000ff;
    transition: 1.2s;
    border-radius:50%;
}
.circle:hover {
    box-shadow: 5px 0px 4px 1px hsla(100, 100%, 0%, 0.5);
    transform: scale(1.2);
}
/** circle text **/
.circle_d {
    position: relative;
    text-align: center;
    margin:auto;
    top:35%;
}

It would be much easier if you provided a link to codepen or fiddle for us rather than us having to copy your code to see what’s happening…or not happening.

1 Like

Hey thanks for your reply. I solved this a while ago. I think I was using absolute positioning and didn’t knew much about margin. I’ve solved it anyways. (p.s. I didn’t know what codepen was :smiley:)

1 Like