This question already has answers here:
How to keep footer at bottom of screen [duplicate]
(6 answers)
Closed last month.
i want to make div "menu" in the bottom fixed even if scrolling is there any way i could do it please any help
.overflow{
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.2);
position: absolute;
inset: 0px;
display: block;
}
.menu{
display: flex;
flex-direction: column;
position: relative;
margin-top: auto;
background-color: white;
border-radius: 12px 12px 0px 0px;
max-height: 90%;
transform: translateY(0px);
transition: transform 250ms ease-out 0s;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="overflow">
</div>
<div class='menu'>
<h1>item 1 </h1>
<h1>item 1 </h1>
</div>
</body>
</html>
i want to make div "menu" in the bottom fixed even if scrolling is there any way i could do it please any help
Replace position: relative to position: fixed on menu, and style it take position in the bottom with left: 0 and bottom: 0:
.overflow {
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.2);
position: absolute;
inset: 0px;
display: block;
min-height: 2000px;
}
.menu {
/* 👇 Add these */
position: fixed;
left: 0;
bottom: 0;
width: 100%;
display: flex;
flex-direction: column;
margin-top: auto;
background-color: white;
border-radius: 12px 12px 0px 0px;
max-height: 90%;
transform: translateY(0px);
transition: transform 250ms ease-out 0s;
}
<div class="overflow">
</div>
<div class='menu'>
<h1>item 1 </h1>
<h1>item 1 </h1>
</div>
Related
So pretty much I want to show text on what each of these images are when I hover over it. When you hover over it it should blur the image so you can see the text better. I am pretty new to html and couldn't figure this out on my own. -----------------------------------------------------------------------------------------------------------------------------
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
background-image: url('../Images/three.png') ;
width:100%;d
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 100%;
background-position: 0% 100%;
}
.coatofarms {
width: 5%;
z-index: 15;
position: absolute;
left: 0.5%;
top: -2%;
transition: all .1s ease-in-out;
}
.coatofarms:hover {
top: -1%;
transform: scale(1.0);
}
.topnav {
overflow: hidden;
background-color: #e1bc85;
position:absolute;
top: 0%;
width: 100%;
}
.topnav a {
float: left;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 20px;
margin-left: 10%;
font-family: Bodoni Mt;
}
.topnav a:hover {
background-color: #ddd;
color: black;
}
.topnav a.active {
background-color: #3a5063;
color: white;
}
table {
background-color:#3a5063;
width:100%;
position: absolute;
height: 1.5%;
top: 6.5%;
}
a.link:link {color:#000000;text-decoration:none;}
a.link:visited {color:#000000;text-decoration:none;}
a.link:hover {text-decoration:none;}
.giza {
transition: all .1s ease-in-out;
position: absolute;
top: 12%;
left:1%;
border-radius: 40%;
}
.giza:hover {
box-shadow: 0 0 0 10px #000000;
transition: .5s ease
}
/*-----------------------------------------*/
.luxor {
transition: all .1s ease-in-out;
position: absolute;
top: 16.2%;
left: 40%;
border-radius: 40%;
}
.luxor:hover {
box-shadow: 0 0 0 10px #000000;
transition: .5s ease
}
/*-----------------------------------------*/
.siwalandmark {
transition: all .1s ease-in-out;
position: absolute;
top: 10.4%;
right: 1%;
border-radius: 40%;
}
.siwalandmark:hover {
box-shadow: 0 0 0 10px #000000;
transition: .5s ease
}
/*-----------------------------------------*/
.abu {
transition: all .1s ease-in-out;
position: absolute;
right: 1%;
top: 56%;
border-radius: 40%;
}
.abu:hover {
box-shadow: 0 0 0 10px #000000;
transition: .5s ease
}
/*-----------------------------------------*/
.abydos {
transition: all .1s ease-in-out;
position: absolute;
top: 65%;
left: 40%;
border-radius: 40%;
}
.abydos:hover {
box-shadow: 0 0 0 10px #000000;
transition: .5s ease;
}
/*-----------------------------------------*/
.whitedesert {
transition: all .1s ease-in-out;
position: absolute;
top: 62%;
left: 1%;
border-radius: 40%;
}
.whitedesert:hover {
box-shadow: 0 0 0 10px #000000;
transition: .5s ease;
}
<!DOCTYPE html>
<html>
<head>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Quicksand:wght#300;500&display=swap" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Landmarks</title>
<link rel="icon" href="Images/flag.png">
<link rel="stylesheet" href="CSS/landmarks.css">
</head>
<body>
<div class="coatofarms"><img src="Images/coabetter.png" class="coa" width="75px" z-index="2"></div>
<div class="topnav">
Food
Landmarks
Visit Us
</div>
<img src="Images/giza.jpg" width="25%" class="giza" >
<img src="Images/luxorstemple.jpg" width="25%" class="luxor" >
<img src="Images/siwa.png" width="25%" class="siwalandmark">
<img src="Images/abu.jpg" alt="simbel" width="25%" class="abu" >
<img src="Images/abydos.jpeg" width="25%" class="abydos">
<img src="Images/whitedesert.jpg" width="25%" class="whitedesert">
<!--Table-->
<table>
<tr>
<th></th>
<th></th>
<th></th>
</tr>
</table>
</body>
</html>
There are several ways of doing it and you can do this clearly in pure CSS and HTML without Javascript.
First: blur image: (as seen in example in both images)
there is a CSS filter method filter: blur(5px);
That's it. Just as simple as that.
Second: add text with a Tooltip (as seen in the snippet on the first image)
You can just add the attribute title="tooltip text" and HTML includes a tooltip for you automatically with the text of the attribute. Hover with your cursor and wait a little
Third: make div with text visible on hover (as seen in snippet in second image)
you have to wrap the image and div tag into a sourrounding container and add CSS to it. So when you hover the container then you simply set the text-div to visible
.container {
position: relative;
text-align: center;
color: white;
width: 25%;
}
.blur_and_tooltop:hover {
filter: blur(5px);
-webkit-filter: blur(5px);
}
.text-box {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
visibility: hidden;
}
.container:hover .blur_and_visibility {
filter: blur(5px);
-webkit-filter: blur(5px);
}
.container:hover .text-box {
visibility: visible;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<img src="https://picsum.photos/id/1/200" alt="blur_and_tooltop" width="25%"
title="Just a normal HTML5 tooltip. No CSS needed" class="blur_and_tooltop">
<div class="container">
<img src="https://picsum.photos/id/15/200" alt="advanced pure CSS and HTML" width="100%" class="blur_and_visibility">
<div class="text-box">
<h3>I am some fancy TEXT</h3>
</div>
</div>
</body>
</html>
There's a few different ways of doing this through things like CSS, javascript/jQuery, or utilizing built in functions of a third party extension such as Bootstrap. The quickest would be to show the title attribute on hover.
Example HTML
<img src="https://cdn.theatlantic.com/media/mt/science/cat_caviar.jpg" title="Cat Caviar" />
I'm trying to move my in front my CSS animation background and set it below the buttons i tried adjusting the z-index of my text area and the animations, i gave an id to the text area and a and tried to modify that in CSS but none of this worked and it stills hidden back there, a I'm relative new and i don't know what i have to do, this is my first post so please let me know if i did something wrong.
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="Fantasy.css"/>
<title>Fantasy Name Generator(Test)</title>
</head>
<body>
<div className="container">
<img class="img" id="img3">
<img class="img" id="img2">
<img class="img" id="img1">
</div>
<div class="buttons">
<button class="elven_button" id="elvenFemButton"type="button">Elves</button>
<button class="human_button" type="button">Human</button>
<button class="dwarf_button" type="button">dwarf</button>
</div>
<div class="textArea">
<textarea id="areaOfText"></textarea>
</div>
<script src="ElvenFem.js"></script>
</body>
</html>
CSS:
.textArea {
width: 100%;
height: 150px;
padding: 12px 20px;
box-sizing: border-box;
border: 2px solid black;
border-radius: 4px;
background-color:black;
font-size: 16px;
resize: none;
z-index: -1;
position: relative;
}
.buttons{
position: absolute;
}
.elven_button {
background-color: springgreen;
transition: background-color .5s;
font-size: 16px;
padding: 14px 40px;
border-radius: 12px ;
}
.elven_button:hover{
background-color: palegreen;
cursor:url("../Media/joke3.cur"), default;
}
.dwarf_button{
background-color: rgb(187, 182, 182);
transition: background-color .5s;
font-size: 16px;
padding: 14px 40px;
border-radius: 12px ;
}
.dwarf_button:hover{
background-color: rgb(248, 248, 247);
cursor:url("akary_Hammer.cur"),default;
}
.human_button{
background-color: chocolate;
transition: background-color.5s;
font-size: 16px;
padding: 14px 40px;
border-radius: 12px ;
}
.human_button:hover{
background-color: wheat;
cursor: url("humanD1.cur"),default;
}
.textarea {
position: relative;
top: 40px; left: 40px;
}
.container{
position: relative;
display: block;
width: 100%;
max-width: 400px;
height: 280px;
margin: 0 auto;
z-index: 2;
}
.img{
position:absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
-webkit-animation: fade 24s infinite;
animation: fade 24s infinite;
}
#img1{
animation-delay: 0s;
background-image: url('city1.jpg');
}
#img2{
background-image: url('human2.jpg');
animation-delay: 8s;
}
#img3{
background-image: url('morgoth_ungoliath.jpg');
animation-delay: 16s;
}
#-webkit-keyframes fade {
0% {
opacity: 1;
}
20% {
opacity: 1;
}
34% {
opacity: 0;
}
88% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#keyframes fade {
0% {
opacity: 1;
}
20% {
opacity: 1;
}
34% {
opacity: 0;
}
88% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.wrapper {
position: relative;
}
.pseudo-img {
position:absolute;
top: 100px;
height:200px;
width: 200px;
background-color:black;
color:orangered;
z-index: 1;
}
.textArea {
position: absolute;
color:white;
top: 200px;
left: 80px;
height: 100px;
width:100px;
z-index:2;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="Fantasy.css"/>
<title>Fantasy Name Generator(Test)</title>
</head>
<body>
<div className="wrapper">
<div className="container">
<div class="pseudo-img">My animation</div>
<img class="img" id="img3">
<img class="img" id="img2">
<img class="img" id="img1">
</div>
<div class="buttons">
<button class="elven_button" id="elvenFemButton"type="button">Elves</button>
<button class="human_button" type="button">Human</button>
<button class="dwarf_button" type="button">dwarf</button>
</div>
<div class="textArea">
<p id="areaOfText">My text</p>
</div>
</div>
<script src="ElvenFem.js"></script>
</body>
</html>
Are you looking for something like this?
I think you by accident named the class .textarea instead of textArea give it a background-color and some content inside the p tag to see it clearly
i am working on chat application i want to make the button to be responsive for all the screen width below i added the code for the reference
Try shrinking the page width-wise and you'll see my issue. How can I keep the button size and position as close to the same as desktop as possible when resizing the screen? I'm stumped.
Pen: https://codepen.io/trjwaugh/pen/QWvypQJ
//FONTS
$heading-font: 'Roboto', sans-serif;
$main-font: 'Open Sans', sans-serif;
//COLORS
$btn-blue: #35A7FF;
* {
padding: 0;
margin: 0;
}
#header__chat {
position: absolute;
top: 30%;
left: 40%;
transform: translate(-50%, -50%);
width: 50vw;
max-width: 1000px;
display: flex;
padding: 20px;
box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
border-radius: 50px;
animation: 5s;
}
#header__btn {
position: absolute;
top: 30%;
left: 72%;
transform: translate(-50%, -50%);
width: 6vw;
display: flex;
padding: 30px;
box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
border-radius: 50px;
background-color: $btn-blue;
color: white;
align-items: center;
h2{
font-size: 2vw;
padding: 10px;
text-shadow: 1px 1px 3px rgba(0,0,0,0.3);
text-transform: uppercase;
}
}
h1 {
font-size: 5vw;
font-family: $heading-font;
}
h2 {
font-size: 2vw;
font-family: $heading-font;
}
.typing {
width: 12ch;
animation: typing 2s steps(22), blink .5s step-end infinite alternate;
white-space: nowrap;
overflow: hidden;
border-right: 3px solid;
}
#keyframes typing {
from {
width: 0
}
}
#keyframes blink {
50% {
border-color: transparent
}
}
<html lang="en">
<!--- Required Meta Tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="Hello, I'm Tim. A Frontend Web Developer, always curious, learning and growing my skills in web design, data, analytics and software in general.">
<!--- CSS -->
<link rel="stylesheet" href="css/style.css">
<head>
<style>#import url('https://fonts.googleapis.com/css2?family=Open+Sans&family=Roboto:wght#400;500;700&display=swap');</style>
</head>
<body>
<div id="header__chat">
<h1 class="typing">Text Goes Here.</h1>
</div>
<div id="header__btn">
<h2>Send</h2>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vanilla-tilt/1.7.0/vanilla-tilt.min.js" integrity="sha512-SttpKhJqONuBVxbRcuH0wezjuX+BoFoli0yPsnrAADcHsQMW8rkR84ItFHGIkPvhnlRnE2FaifDOUw+EltbuHg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="js/script.js"></script>
</body>
</html>
By using media queries adjust the padding , width, height of button according to screen size
#media only screen and (max-width: 600px) {
#header__btn {
position: absolute;
top: 30%;
left: 75%;
transform: translate(-50%, -50%);
background-color: #35A7FF;
color: white;
align-items: center;
width: 50px;
height: 30px;
padding: 25px;
border-radius: 50px;
}
}
please refer this w3 schools media queires to clearly understand what is media queries
here i attached the reference image on changing css
Having an issue in which the body (and thus the rest of the containers on the page) are working fine on the responsive / fullscreen monitor mode, but when I toggle the device toolbar to see what it looks like on mobile, there is a noticable section to the right which i have no idea what/how/why it is there. Upon inspecting element it points to the html element but i have the width set to 100% and tried 100vw but nothing seems to work.
I am guessing it has something to do with the way %'s and vw's behave on mobile or possibly the way width works but am stumped and any help would be appreciated
EDIT: Reproducible code for the error (removed most other sections but the problem applies to all of them if i add it back
HTMLFILE:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link rel="stylesheet" href="style.css" />
<link rel="manifest" href="favicon_io (1)/" />
<title>David Chin Personal Website</title>
</head>
<!-- Header Section-->
<body>
<section class="header">
<div class="header-container">
<div class="col-1">
<h2 class="expand">Dev</h2>
<h2 class="expand">Chin</h2>
</div>
<div class="col-2">
<img src="assets/img/test.png" alt="test" />
</div>
</div>
</section>
<script src="assets/js/main.js"></script>
</body>
</html>
CSS FILE:
html {
margin: 0;
padding: 0;
width: 100%;
border: 10px solid red;
}
body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
font-family: "Roboto Mono", monospace;
border: 10px solid blue;
box-sizing: border-box;
background: pink;
}
.section-intro {
margin-left: 10%;
}
.header {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
height: 90vh;
width: 100%;
animation: 0.5 header ease 1.25s;
}
#media only screen and (min-width: 768px) {
.header {
display: flex;
}
}
.header-container {
display: flex;
flex-direction: row;
width: 100%;
margin: 0;
}
.header-container .col-1 {
display: flex;
flex-direction: column;
width: 50%;
animation: fadein 0.8s linear forwards;
}
.header-container .col-2 img {
opacity: 0;
animation: 0.5s fadein ease 1.25s;
animation-fill-mode: forwards;
}
.header-container h2 {
margin-block-start: 0;
margin-block-end: 0;
}
.header-container .col-2 {
display: flex;
justify-content: center;
align-items: center;
width: 50%;
z-index: -1;
}
.header-container .expand {
color: black;
padding: 0;
margin: 0;
overflow: hidden;
font-size: 15rem;
white-space: nowrap;
width: 1ch;
animation: 0.5s expand ease-in-out;
animation-delay: 1.25s;
animation-fill-mode: forwards;
transform: translateX(50vw);
text-shadow: 2px 2px 6px grey;
}
/* Short term fix on text overflow */
#keyframes expand {
0% {
width: 1ch;
font-size: 15rem;
}
80% {
min-width: 330px;
}
100% {
font-size: 7rem;
transform: translateX(20vw) translateY(8rem);
min-width: 330px;
}
}
.header-container .img {
border: 2px solid black;
padding: 3rem;
background: rgba(0, 0, 0, 0);
opacity: 0;
animation: 1s fadein linear;
animation-delay: 1.25s;
animation-fill-mode: forwards;
max-width: 375px;
max-height: 375px;
}
#keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
I was trying to zoom in an image on hover, it's working fine. But when I added a text over the image it shows some gap at the bottom. I tried, but this gap doesn't remove at all
I tried with the margin, padding, but didn't work
.img-hover-zoom {
height: auto;
overflow: hidden;
position: relative;
display: inline-block;
}
.img-hover-zoom img {
transition: transform .5s ease;
}
.img-hover-zoom:hover img {
transform: scale(1.1);
}
.img-hover-zoom .text {
position: absolute;
padding-top: 15px;
padding-bottom: 15px;
left: 0px;
bottom: 0px;
margin: 0px auto;
text-align: center;
background: rgba(0, 0, 0, 0.5);
font-family: Quicksand;
color: #fff;
width: 100%;
}
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="img-hover-zoom">
<img src="https://www.dike.lib.ia.us/images/sample-1.jpg" alt="Nature" style="width:100%;">
<p class="text">Nature<br />What a beautiful sunrise</p>
</div>
</body>
</html>
Just add display: block to your .img-hover-zoom img
.img-hover-zoom img {
display: block;
}
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.img-hover-zoom {
height: auto;
overflow: hidden;
position: relative;
display: inline-block;
}
.img-hover-zoom img {
transition: transform .5s ease;
display: block;
}
.img-hover-zoom:hover img {
transform: scale(1.1);
}
.img-hover-zoom .text {
position: absolute;
padding-top: 15px;
padding-bottom: 15px;
left: 0px;
bottom: 0px;
margin: 0px auto;
text-align: center;
background: rgba(0, 0, 0, 0.5);
font-family: Quicksand;
color: #fff;
width: 100%;
}
</style>
</head>
<body>
<div class="img-hover-zoom">
<img src="https://www.dike.lib.ia.us/images/sample-1.jpg" alt="Nature" style="width:100%;">
<p class="text">Nature<br/>What a beautiful sunrise</p>
</div>
</body>
</html>
The gap or extra space under the image isn't a bug or issue, it is the default behaviour. Browsers compute their display property to inline but they give them a special behaviour which makes them closer to inline-block elements(as you can vertical align them, give them a height, top/bottom margin and padding, transforms ...).
By default, an image is rendered inline, like a letter.
The simple solution to this is to force the image to block display mode which also works to fix the above problem or apply vertical-align:bottom to img
.img-hover-zoom {
height: auto;
overflow:hidden;
position: relative;
display: inline-block;
}
.img-hover-zoom img {
transition: transform .5s ease;
display:block;
}
.img-hover-zoom:hover img {
transform: scale(1.1);
}
.img-hover-zoom .text{
position: absolute;
padding-top:15px;
padding-bottom:15px;
left: 0px;
bottom: 0px;
margin:0px auto;
text-align: center;
background: rgba(0, 0, 0, 0.5);
font-family: Quicksand;
color: #fff;
width: 100%;
}
<div class="img-hover-zoom">
<img src="https://www.dike.lib.ia.us/images/sample-1.jpg" alt="Nature" style="width:100%;">
<p class="text">Nature<br/>What a beautiful sunrise</p>
</div>
just make you image display ether table or block
add this css :
.img-hover-zoom img{
display: table;
}
see result :
.img-hover-zoom {
height: auto;
overflow: hidden;
position: relative;
display: inline-block;
}
.img-hover-zoom img {
transition: transform .5s ease;
}
.img-hover-zoom:hover img {
transform: scale(1.1);
}
.img-hover-zoom .text {
position: absolute;
padding-top: 15px;
padding-bottom: 15px;
left: 0px;
bottom: 0px;
margin: 0px auto;
text-align: center;
background: rgba(0, 0, 0, 0.5);
font-family: Quicksand;
color: #fff;
width: 100%;
}
.img-hover-zoom img{
display: table;
}
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="img-hover-zoom">
<img src="https://www.dike.lib.ia.us/images/sample-1.jpg" alt="Nature" style="width:100%;">
<p class="text">Nature<br />What a beautiful sunrise</p>
</div>
</body>
</html>