I’ve been trying to make an interesting function where if you hover your cursor over the red div/ the red box it’ll make it expand and reveal some more text with the use of a vertical linear transition. However, I can’t seem to figure out how to make it happen.
I don’t know how to phrase it to find results to help me with my issue so I came on here to get some help.
And here’s the code for that div.
<!DOCTYPE html>
<html>
<style>
.box {
transform:translatey(-20px);
background: #9b59b6;
height: 200px;
width: 500px;
line-height:70px;
text-align: center;
color: white;
font-size: 20px;
}
.key {
height:50px;
width:600px;
background:red;
transition: width 2s, height 2s;
}
.key:hover {
height:500px;
}
</style>
<body>
<div class="box key">
<h1 ID="super">Trying to put it here</h1>
</div>
</body>
</html>
New contributor
user24650971 is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.