I'm currently working on a small little project where i want to use the HTML/CSS checkbox-'hack' to simulate a toggleable image rotation. Problem is, when i add more content to the page and resize it, the images wont stay together at all.
I've tried scaling the images by % and vw/vh without success, as well as scaling the header above the images to make sure they don't 'jump' around when they move.
https://jsfiddle.net/9u3vz5mo/
#cup {
width: 75%;
height: 50vh;
position: relative;
z-index: 1;
}
#mouth {
position: absolute;
width: 7%;
height: 3%;
z-index: 2;
top: 43.5%;
left: 50.5%;
}
<h1>Paragraph Time, please let this work oh lord</h1>
<div class="images">
<img id="cup" src="https://i.imgur.com/SFV05KS.png">
<input type="checkbox" id="checkmouth">
<label for="checkmouth">
<img id="mouth" src="https://i.imgur.com/95acGMs.png">
</label>
</div>
What i hope to achieve is a version where the images scale responsivly to the sites size, and where the rest of the content is shown without having the mouth fly of the designated space on the cup.
Add position: relative to parent element of both images (.images in this case) .
Then adjust position of #mouth
position: absolute elements are positioned relative to first parent element with position: relative
When setting the position to relative, you can add additional positioning attributes (top, bottom, left, right). The relative element is relative to itself. For example, if you set top: 10px the element will move 10px to the top from its normal position.
.images{
position: relative;
}
#cup {
width: 75%;
height: 50vh;
position: relative;
z-index: 1;
}
#mouth {
position: absolute;
width: 7%;
height: 6%;
z-index: 2;
top: 58.5%;
left: 50.5%;
}
#checkmouth {
display: none;
}
input:checked + label > img {
transform: rotateX(180deg);
transition-duration: 0.5s;
}
input:not(:checked) + label > img {
transform: rotateX(0deg);
transition-duration: 0.5s;
}
<!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" type="text/css" href="./style.css">
<title>Document</title>
</head>
<body>
<h1>Paragraph Time, please let this work oh lord</h1>
<div class="images">
<img id="cup" src="https://i.imgur.com/SFV05KS.png">
<input type="checkbox" id="checkmouth">
<label for="checkmouth">
<img id="mouth" src="https://i.imgur.com/95acGMs.png">
</label>
</div>
</body>
</html>
Always specify 100% width or vw for scaling, and do not set a specified height for images you want to scale correctly. Place them in a div container.
Your problem is setting a specified height .
Related
This question already has an answer here:
Text over image - responsive
(1 answer)
Closed 2 months ago.
I need to put some text over an image in a specific position. I want the text to stay in place & reduce its font-size when the viewport shrinks. Like this:
Text MUST be just above the horizontal green line, and it MUST touch the yellow line on the right.
This is my code:
<style>
#hero img {
width: 100%;
}
#motto {
position: absolute;
bottom: 272px;
right: 360px;
font-size: 59px;
}
</style>
<div id="hero">
<img src="image.jpg">
<div id="motto">This is my long, long text</div>
</div>
The text is correctly positioned iniitally, but then it goes banana when I shrink the viewport
I also tried with font-size: 5vw. The font size seems to shrink, but it doesn't stay in place.
I would like to preserve the <img> and NOT using a background-image, if possible. Anything else would work for me.
Thanks
Someone suggested to take a look at Text over image - responsive . I did (I already did before posting, actually), and it doesn't work the way I need it to (the font-size is fixed, and it doesn't shrink, which is the main problem here). For context: the (adapted) code of that answer is
<style>
img {
display: block;
width: 100%;
}
.thumbnail {
position: relative;
display: inline-block;
}
.caption {
position: absolute;
top: 77%;
left: 66%;
transform: translate( -50%, -50% );
text-align: center;
color: white;
font-weight: bold;
}
</style>
<div id="box-search">
<div class="thumbnail">
<img src="image.jpg" alt="">
<div class="caption">
<p>This is my long, long text</p>
</div>
</div>
</div>
The result is this:
Responsive + fixed position (px) won't work together.
If you want something to be responsive, the positioning must be too. You'll be looking to use % or vw/vh rather than px.
Unfortunately, didn't have your image to work with, so borrowed the second image from your post to demonstrate (so ignore the second "This is my long, long text").
#hero {
position: relative;
}
#hero img {
width: 100%;
}
#motto {
position: absolute;
bottom: 26%;
right: 27%;
font-size: 5vw; /** responsive font-size **/
}
<div id="hero">
<img src="https://i.stack.imgur.com/r0twu.jpg">
<div id="motto">This is my NEW long, long text</div>
</div>
<style>
#hero img {
width: 100%;
}
#motto {
position: relative;
bottom: 272px;
right: 0px;
font-size: 5vw;
}
</style>
<div id="hero">
<img src="https://joshuakosamu.netlify.app/assets/img/jdslk/logos/icons/logo1.png">
<div id="motto">This is my long, long text</div>
</div>
Problem:
First of all, to make the text remain in the desired position relative
to the image's constant changing size calls for some complex css transformation. This is because you are trying to make the text constantly track a position on an image that it knows nothing about nor does it know the ever-changing viewpoint on the host device.
Solution 1:
Why not photoshop the image and write the text on the image. This way your text will always resize with the image, provided your text isn't dynamic
Solution 2:
Edit your css by setting the font-size: 5vw; as you've already stated and setting position: relative; so that your text can move somewhat relative to the <div id="hero"> containing your image.
See code snippet attached:
<!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>
<style type="text/css">
.container{
position: relative;
text-align: center;
color: white;
}
.txt{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<div class="container">
<img src="lady.webp" alt="" srcset="">
<div class="txt">Full stack developer</div>
</div>
</body>
</html>
I have a text {L U V B A G} that should appear under the image. I need the html and css for it.
This is how it looks.
enter image description here
{L U V B A G} that should appear under the image.
If you want the text to be on top of your image but at the bottom you can use z-index like the comment says or you can use position absolute on your text.
Code below is adapted from : https://www.w3schools.com/howto/howto_css_image_text.asp
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.container {
position: relative;
text-align: center;
color: white;
}
.centered {
position: absolute;
font-size: 3rem;
top: 90%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<div class="container">
<img src="https://tse3.mm.bing.net/th?id=OIP.qpsTLCVZFHVmKABv5VH7YAHaE8&pid=Api" alt="food" style="width:100%;">
<div class="centered">Best Food 2022</div>
</div>
</body>
</html>
If you don't necessarily want your text on top of the image but rather separated and under your image you can just do two rows and use flexbox.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.flex-container {
display: flex;
flex-direction: column;
text-align: center;
}
</style>
</head>
<body>
<div class="flex-container">
<img src="https://tse3.mm.bing.net/th?id=OIP.qpsTLCVZFHVmKABv5VH7YAHaE8&pid=Api" alt="food" style="width:100%;">
<div>Best Food 2022</div>
</div>
</body>
</html>
Hope that answered your question!
Solution Explained
You'll have one parent div, and inside it, you'll have an image and the text. The text (i.e. <h2>) will have position: absolute with z-index: -1 to make it one layer down the image, and we will need to add position: relative to the parent to stick the <h2> absolute position to this parent.
The top: 15%; right: 50%; transform: translate(50%, -50%); are mainly used to position the absolute <h2> properly, horizontally centered with a little top percentage you can manipulate depending on the image.
Extras like letter-spacing was used to give a proper look & feel like the image you provided.
* {
margin: 0;
padding: 0;
}
.banner {
position: relative;
height: 500px;
text-align: center;
}
.banner h2 {
position: absolute;
top: 15%;
right: 50%;
transform: translate(50%, -50%);
font-size: 10rem;
letter-spacing: 20px;
z-index: -1;
}
.banner img {
height: 100%;
}
<div class="banner">
<h2>LUVBAG</h2>
<img src="https://www.pngall.com/wp-content/uploads/2016/04/Women-Bag-Transparent.png" alt="">
</div>
In the attached image below, I want to recreate the "1" circle to the left of the profile box. I'm currently trying to use CSS positioning to get it like the image above, but whenever I shrink my computer screen, the circle doesn't move with the profile box. I'm not quite sure how to fix it. I've attached my code below the image.
body{
width: 100%;
}
.wrapper {
display: grid;
grid-template-columns: repeat(4, 1fr);
width: 80%;
margin: auto;
height: 100%;
}
.Ranking{
position: absolute;
left: 20px;
top: 10%;
transform: translateY(-50%);
background: #000;
color: #fff;
height: 52px;
width: 52px;
border-radius: 100%;
display: flex;
justify-content: center;
align-items: center;
opacity: 1;
padding-top: 4px;
transition: background-color .25s linear .5s;
font-family: "Decima";
font-size: 30px;
line-height: 30px;
color: #f0f0f0;
font-weight: 300;
}
.Description{
flex:1;
background-color: blue;
grid-column: 2/5;
}
<!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="styles.css">
</head>
<body>
<div class="wrapper">
<div class="Ranking"></div>
<div class="Name">One</div>
<div class="Summary">Summary: <br>He really hits, with a LF fit</div>
<div class="Level">Highest Level: A+ <br> Age: 21</div>
<div class="Body">Height: 6'1" <br> Weight: 215 lbs</div>
<div class="Profile"><img src="images/Dustin Harris.jfif"> </div>
<div class="Description">Five</div>
</div>
</body>
</html>
There is a CSS element called #media which will come helpful to you
#media screen (min-width: 800px) {
.container {
/* position and any property of the element according the small screen viewport*/
}
}
800px is the screen size under which the screen become reactive.
You might want to look at two aspects: HTML markup and CSS basics. TL;DR. See this CodePen example I put together for you.
position: absolute; looks for the closest parent that has position value of relative, absolute, or fixed. If there's no parent that has such position value, the element will be positioned absolute against the body. In your example, wrapper (i.e. the immediate parent) doesn't have position defined, thus Ranking will be positioned outside your intended area.
As a matter of fact, you won't likely need absolute positioning here. transform: translateX() indeed is a good starter. Instead of translateY(), you could move it horizontally by translateX().
Again, see this CodePen example I put together for you.
I'm relatively new to coding, and working on a repo in Github. I have 12 clickBoxes on the same page that I'm applying a hover effect to, so that a PNG appears on hover. When the hover effect is applied, the clickBox no longer works, and vice versa. I'm pretty sure it's an issue with HTML
The clickBox I'm currently working on is .clickBox-Ministries. This is the hover effect in CSS:
.clickBox-Ministries,
.png-overlay {
position: absolute;
width: 6%;
height: 14%;
top: 12%;
left: 11%;
}
.png-overlay{
/*display: none;*/
position: absolute;
width: 12%;
height: 13%;
top: 12.5%;
left: 8%;
z-index: 1;
opacity: 0;
}
.common-parent{
position: relative;
}
img.png-overlay:hover{
display: inline;
opacity: 1;
/*transition: opacity 0.1s ease-in-out;*/
cursor: pointer;
}
When I set up the HTML this way, the clickBox doesn't work and neither does the hover effect:
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel = "stylesheet" type = "text/css" href = "style.css"/>
</head>
<body>
<!-- Main Nav -->
<div class=clickContainer>
<div class="common-parent">
<div class="clickBox-Ministries">
</div>
<img class="png-overlay" src="Ministries_Overlay.png">
</div>
When I remove the closing tag from the .common-parent, the PNG hover effect works but the clickBox does not.
Finally, when I remove the closing tag from .clickBox-Ministries, the clickBox works but the PNG hover effect does not:
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel = "stylesheet" type = "text/css" href = "style.css"/>
</head>
<body>
<!-- Main Nav -->
<div class=clickContainer>
<div class="common-parent">
<div class="clickBox-Ministries">
<img class="png-overlay" src="Ministries_Overlay.png">
</div>
Any thoughts?
Basically, your clickBox-Ministries div has no height because it has no content - except when you leave off its terminating /div, in which case it thinks the img is its content and takes on the image's natural height.
By default, div elements are block level elements. See https://developer.mozilla.org/en-US/docs/Web/HTML/Block-level_elements for discussion on how they pick up their default width and height.
One way to check what is happening is to inspect the elements via your browser's dev tools. You'll see in your example that the div takes on the width of the viewport (possibly minus a bit for default margin, depending on what you have box-sizing set as) and height of 0 unless it has the img within it.
On a more minor point, to make the image fade out gradually in the same way as it fades in, put the transition on the img class, not on just the hover.
Here is a snippet which does these alterations. It's a bit strange because without any natural height to the clickable div it's only the img that does anything (on hover in that case). If you want the div above the img to be clickable it needs some clickable area, i.e. some content or to have height and width explicitly set.
So when you run this snippet you get a blank page and have to sort of wave the mouse around near the top left to get the img to appear.
body {
width: 100vw;
height: 100vh;
}
.clickContainer {
width: 100%;
height: 100%;
}
.clickBox-Ministries,
.png-overlay {
position: absolute;
width: 6%;
height: 14%;
top: 12%;
left: 11%;
}
.png-overlay{
/*display: none;*/
position: absolute;
width: 12%;
height: 13%;
top: 12.5%;
left: 8%;
z-index: 1;
opacity: 0;
transition: opacity 0.1s ease-in-out;
}
.common-parent{
position: relative;
width: 100%;
height: 100%;
}
img.png-overlay:hover{
display: inline;
opacity: 1;
cursor: pointer;
}
<!-- Main Nav -->
<div class=clickContainer>
<div class="common-parent">
<div class="clickBox-Ministries">
</div>
<img class="png-overlay" src="https://picsum.photos/id/1015/200/300">
</div>
</div>
I am trying to make a Div take the whole height of a page. The problem is when my page has scroll the div is not taking whe whole height only takes the height until the scroll. The div is used to overlap the page when loading. Here is my CSS code:
#disablingDiv
{
/* Do not display it on entry */
display: block;
/* Display it on the layer with index 1001.
Make sure this is the highest z-index value
used by layers on that page */
z-index:1001;
/* make it cover the whole screen */
position: absolute;
top: 0%;
left: 0%;
width: 100%;
min-height:100%;
/* make it white but fully transparent */
background-color: gray;
opacity:.5;
}
And here my HTML code:
<!DOCTYPE html>
<html ng-app="app">
<head>
<title ng-bind="title">
My app
</title>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />
<base href="/">
</head>
<body>
<div id="disablingDiv"></div>
<ui-view></ui-view>
</body>
</html>
Thanks in advance!
Do you want to have some kind of overlay? If yes you may want to use position fixed instead of absolute. Unlike position absolute, fixed will position the element relative to the viewport (visible area). Additionally you may want to set "overflow: hidden" to the scrolling container while the overlay is active.
.loadingOverlay {
position: fixed;
z-index: 100;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
/* make it white but fully transparent */
background-color: gray;
opacity:.5;
}
.loadingContainer {
/* do not allow scrolling */
overflow: hidden !important;
}
Alternativly you can wrap you disablingDiv around the actual view. Might be useful if you don't want to block the whole page but just the content while still allowing to navigate e.g. using some toolbar.
Change position: absolute; to position: fixed;
html,body {
height: 3000px;
}
div {
position: fixed;
background: red;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
<div></div>
If it's for loading, I would disable the scroll while it's loading with html, body { overflow: none; }
Use Position fixed instead of absolute.
#disablingDiv
{
position: fixed;
height: 100%;
}
Have you tried setting styles to html and body tags like below?
html {
height: 100%;
}
body {
height: 100%;
}
Edit:
As per your comment, I just put your code in a jsfiddle and it seems to achieve what you're asking for? If not can you elaborate please? What have you already tried?
https://jsfiddle.net/qLxm7rbx/1/
Add below code and Try:
#disablingDiv {
height:100vh;
}
Also check browser support.
Or:
body, html {
height: 100%;
}
#disablingDiv {
height: 100%;
}