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%;
}