Issue
I'm trying to make a website for practice, and some small school projects. I was experimenting with having a box with a title inside, and a picture set as the background. When the box was hovered over, the box would expand in height, text would fade in from the top, and the title would move up.
All parts of this worked, except for the text that transitions down and fades in. Originally, the question was going to be about how to fix some stuttering on all different sizes. However after I changed some percentages, I managed to get it to work on most width sizes of the page.
Now when the screen width is really small, the text seems to move downwards before transitioning upwards. The effect is more obvious, the smaller the width is. I know that no one will be using this page on that small of a screen, but it would be nice to have it work regardless. I've tried using vw to fix it, but to no avail.
Is there another way to make it responsive? Here is my website link so you can see it. https://tubzpi.xyz/school.html
Here is the code relating to the CSS. It consists of both the picture CSS, the overlay CSS, and the text that transitions downwards:
$(document).ready(function() {
$("#seven-wonders").hover(
function() { // On hover
$("#additional-text").stop().animate({
"top": "40%",
"opacity": "1"
}, 100); // 500ms animation duration
},
function() { // On hover out
$("#additional-text").stop().animate({
"top": "-10%",
"opacity": "0"
}, 100); // 500ms animation duration
}
);
});#seven-wonders {
background-image: url('https://www.pixel4k.com/wp-content/uploads/2020/08/great-wall-of-china-4k_1596916657-2048x1365.jpg');
background-position: 60% 60%;
/* Center the image */
background-size: cover;
/* Ensure the image always covers the entire box */
height: 115px;
width: 85vw;
border-radius: 10px;
transition: all 0.5s ease;
/* Transition for the hover effect */
margin: 0 auto;
}
#seven-wonders:hover {
height: 200px;
/* Increase the height on hover */
width: 85vwpx;
/* Increase the width on hover */
}
#seven-wonders-overlay {
background: rgba(0, 0, 0, 0);
height: 100%;
/* Make the overlay always match the size of the box */
width: 100%;
/* Make the overlay always match the size of the box */
opacity: 1;
transition: 0.5s ease, opacity 0.5s;
font-size: 36px;
color: #ffffff;
display: flex;
/* Add this line */
justify-content: center;
/* Add this line */
align-items: center 0;
/* Add this line */
padding-top: 0px;
position: relative;
/* Add this line */
border-radius: 10px;
transition: background 0.8s ease;
/* Change this line */
}
#seven-wonders:hover #seven-wonders-overlay {
background: rgba(0, 0, 0, 0.2);
/* Change this line */
}
.borderlinks {
color: #ffffff;
position: absolute;
/* Add this line */
top: 35px;
/* Add this line */
text-decoration: none;
transition: top 0.9s ease;
/* This will now transition both ways */
}
#seven-wonders:hover .borderlinks {
top: 10%;
/* Move the text to the top of the box on hover */
}
#additional-text {
color: #e7dfdf;
opacity: 0;
position: absolute;
top: -1%;
/* Start from above the box */
width: 75vw;
text-align: center;
font-size: 17px;
transition: top 0.8s ease, opacity 0.4s ease;
-webkit-transition: top 0.8s ease, opacity 0.4s ease;
-moz-transition: top 0.8s ease, opacity 0.4s ease;
-o-transition: top 0.8s ease, opacity 0.4s ease;
}
#seven-wonders:hover #additional-text {
opacity: 1;
font-size: 17px;
height: 10%;
display: flex;
align-items: center;
text-align: top;
justify-content: center;
top: -100%;
/* Slide down to the middle of the box */
transform: translateY(50%);
}
@media only screen and (max-width: 1374px) {
#seven-wonders:hover #additional-text {
height: 30px;
/* Increase the height */
}
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="index.css">
<title>School Projects</title>
<link rel="preload" as="script" href="index.js">
<link rel="icon" href="favicon.ico" type="image/gif">
</head>
<body id="school-projects-page" class="dark-mode">
<header>
<h1 class="title-text" id="school-title">School Projects</h1>
</header>
<div id="menu-container">
<div class="menu-icon" id="menu-icon">☰</div>
<div class="dropdown" id="dropdown">
<div><a href="index.html" id="home-link">Home</a></div>
<div><a href="http://tubzpi.xyz:5252/" target="_blank" class="dashboard-link align-left">Visit Dashboard</a></div>
<div><a href="school.html" id="school-projects">School Projects</a></div>
<div><span id="dark-mode-toggle">Light Mode</span></div>
</div>
</div>
<div id="seven-wonders">
<div id="seven-wonders-overlay">
<a class="borderlinks" href="7wonders.html">7 Wonders of the World</a>
<div id="additional-text">Embark on a virtual journey to explore the majestic Seven Wonders of the World. From the Great Wall of China to the stunning Taj Mahal, each wonder has a unique story to tell. Click to uncover the fascinating history and breathtaking beauty of these
remarkable landmarks</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="index.js"></script>
</body>
</html>As you can see above, the width is already small so it shows that it stutters when you hover off it.
Solution
Why it's happening is caused by a combination of a few css rules and how you've applied them. Specifically this rule: .feature-box:hover .additional-text which adds display: flex; align-items: center; height: 40px;. Display flex allows align-items to center the text vertically. Even though you've set 40px, it will flow outside of those bounds. You can see this clearly if you add overflow: hidden; to .additional-text and watch how much the text is cut off when adjusting your screen width.
- At wider screens 1400px+,
.additional-textis truly about 40 pixels tall even without the height set in CSS (with the current content). Once you remove the hover,.additional-textlosesalign-items: center;but really only budges about 1-2 pixels. - At roughly 1000px screen width,
.additional-textmeasures to be about 50px tall, and so withdisplay: flex; align-items: center;, it has about 5px overflow above, and 5px overflow below (40px + 5 overflow top + 5 overflow bottom = 50px). Once you remove the hover,.additional-textdrops down about 5px, which isn't that noticeable. - At about 370px screen width,
.additional-textis actually now about 120px tall. However withheight: 40px; display: flex; align-items: center, 40px is overflowing above 40px set height, and 40px overflowing below 40px set height (40+40+40=120). Now when you remove the hover this time,.additional-textdrops down 40px immediately, becausealign-items: center;is suddenly not applied.
You can add the overflow:hidden; rule to .additional-text so you can how the text is positioned, and what happens when display: flex; and align-items: center; are suddenly removed and applied. It will also help to increase the animation time so the animation is slower, so you can see the process slowed down.
The way to fix this is a mixture of moving the display: flex; rules to the .additional-text, and it not be dependent on :hover. I tweaked a few things to your CSS code to make it work more smoothly, as well as adding some media queries. If you compare what I did to what you had, hopefully seeing the changes will make sense. Let me know if something isn't clear.
$(document).ready(function() {
$("#seven-wonders").hover(
function() { // On hover
$("#additional-text").stop().animate({
"top": "30%",
"opacity": "1"
}, 100); // 500ms animation duration
},
function() { // On hover out
$("#additional-text").stop().animate({
"top": "-10%",
"opacity": "0"
}, 100); // 500ms animation duration
}
);
});#seven-wonders {
background-image: url('https://www.pixel4k.com/wp-content/uploads/2020/08/great-wall-of-china-4k_1596916657-2048x1365.jpg');
background-position: 60% 60%;
/* Center the image */
background-size: cover;
/* Ensure the image always covers the entire box */
height: 115px;
width: 85vw;
border-radius: 10px;
transition: all 0.5s ease;
/* Transition for the hover effect */
margin: 0 auto;
}
@media(max-width: 450px){
#seven-wonders {
height: 170px;
}
}
#seven-wonders:hover {
height: 200px;
/* Increase the height on hover */
width: 85vwpx;
/* Increase the width on hover */
}
#seven-wonders-overlay {
background: rgba(0, 0, 0, 0);
height: 100%;
/* Make the overlay always match the size of the box */
width: 100%;
/* Make the overlay always match the size of the box */
opacity: 1;
transition: 0.5s ease, opacity 0.5s;
font-size: 36px;
color: #ffffff;
display: flex;
/* Add this line */
justify-content: center;
/* Add this line */
align-items: center 0;
/* Add this line */
padding-top: 0px;
position: relative;
/* Add this line */
border-radius: 10px;
transition: background 0.8s ease;
/* Change this line */
}
#seven-wonders:hover #seven-wonders-overlay {
background: rgba(0, 0, 0, 0.2);
/* Change this line */
}
.borderlinks {
color: #ffffff;
position: absolute;
/* Add this line */
top: 35px;
/* Add this line */
text-decoration: none;
transition: top 0.9s ease;
/* This will now transition both ways */
}
@media(max-width: 450px){
.border-links {
font-size: 2rem;
}
}
#seven-wonders:hover .borderlinks {
top: 10%;
/* Move the text to the top of the box on hover */
}
#additional-text {
color: #e7dfdf;
opacity: 0;
position: absolute;
top: -1%;
/* Start from above the box */
width: 75vw;
text-align: center;
font-size: 17px;
transition: top 0.8s ease, opacity 0.4s ease;
-webkit-transition: top 0.8s ease, opacity 0.4s ease;
-moz-transition: top 0.8s ease, opacity 0.4s ease;
-o-transition: top 0.8s ease, opacity 0.4s ease;
/*overflow: hidden;*/
display: flex;
align-items: center;
justify-content: center;
top: -100%;
/* Slide down to the middle of the box */
transform: translateY(20%);
}
@media(max-width: 450px){
#additional-text {
transform: translateY(0%);
}
}
#seven-wonders:hover #additional-text {
opacity: 1 !important;
font-size: 17px;
/*height: 10%;*/
/*text-align: top;*/
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="index.css">
<title>School Projects</title>
<link rel="preload" as="script" href="index.js">
<link rel="icon" href="favicon.ico" type="image/gif">
</head>
<body id="school-projects-page" class="dark-mode">
<header>
<h1 class="title-text" id="school-title">School Projects</h1>
</header>
<div id="menu-container">
<div class="menu-icon" id="menu-icon">☰</div>
<div class="dropdown" id="dropdown">
<div><a href="index.html" id="home-link">Home</a></div>
<div><a href="http://tubzpi.xyz:5252/" target="_blank" class="dashboard-link align-left">Visit Dashboard</a></div>
<div><a href="school.html" id="school-projects">School Projects</a></div>
<div><span id="dark-mode-toggle">Light Mode</span></div>
</div>
</div>
<div id="seven-wonders">
<div id="seven-wonders-overlay">
<a class="borderlinks" href="7wonders.html">7 Wonders of the World</a>
<div id="additional-text">Embark on a virtual journey to explore the majestic Seven Wonders of the World. From the Great Wall of China to the stunning Taj Mahal, each wonder has a unique story to tell. Click to uncover the fascinating history and breathtaking beauty of these
remarkable landmarks</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="index.js"></script>
</body>
</html>Answered By - Bjorn.B
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.