When I view my web on full size, it will show like the left image.
When I narrow the window, it will display like the right image
#charset "utf-8";
/* CSS Document */
*{
margin: 0;
padding: 0;
max-height: 1200px;
}
body {
max-height: 1200px;
overflow-y: hidden;
color: rgba(88,88,88,0.92);
}
#bgimg{
width: 40%;
margin: 0;
padding: 0;
max-width: 864px;
}
.bgimg{
background: url(sideimage_4.png) no-repeat center ;
background-size: cover;
height: 1100px;
margin: 0;
}
.goleft{
float: left;
}
#sideright{
width: 60%;
float: right;
background-color:white;
height: 1100px;
overflow: scroll;
overflow-x: hidden;
margin-left: auto;
}
#intro{
width: 100%;
margin: 0;
padding: 0;
background-color: white;
}
#introinner{
text-align: center;
padding: 10% 10px;
}
#introinner h1{
font-family: 'Sofia';
font-size: 500%;
font-weight: 800;
}
#introinner p{
margin: 8px;
font-family: 'Sofia';
}
#introinner a i{
font-size: 80%;
color: rgba(88,88,88,0.92);
}
#banner{
width: 100%;
margin: 0;
padding: 0;
}
#banner img{
width: 100%;
}
#cf {
position:relative;
width:100%;
margin:0 auto;
}
#cf img {
width: 100%;
position:absolute;
left:0;
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
}
#cf img.top:hover {
opacity:0;
}
#selfintro{
margin-top: 500px;
clear: top;
}
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="style/homecss.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=Sofia" rel="stylesheet">
</head>
<body>
<nav id="bgimg" class="goleft">
<div class="bgimg"></div>
</nav>
<section id="sideright" class="goleft">
<section id="intro">
<div id="introinner">
<h1>Troy Wu</h1>
<p>The King in the South</p>
<i class="fa fa-download">DownLoad My Pic</i>
</div>
</section>
<section id="banner">
<img src="http://via.placeholder.com/350x150">
</section>
<div id="cf">
<img class="bottom" src="http://via.placeholder.com/350x150">
<img class="top" src="http://via.placeholder.com/450x150">
</div>
<div id="selfintro"><img src="http://via.placeholder.com/350x150"></div>
<p>asdfasdf asd</p>
</section>
</body>
</html>
I post my code for these two sections. I am pretty sure that the issue happens on the div (cf), because of the position:relative and absolute. I tried to put a margin-top on the css, but it doesn't work. I've been trying to solve this for two days, and still have not clue to this. can you help me solve this issue? how to avoid the space between these two sections?
The problem is usually caused by the elements being inline-block elements instead of block elements, and as inline-block elements respect the whitespace in the markup, you get these gaps between elements.
You can reduce the font-size to zero, and as the space is dependent on the font size, that can solve the problem, or you can remove all the whitespace in your markup (which makes for messy HTML), or you can make the offending elements block items instead of inline-block items if that does't break your layout.
As I don't see any text on your layouts, I would set the font size to zero and see if that solves it, and then set the font size specifically on spans or divs containing text if you need to add labels or titles etc.
Related
I would like to get a hover effect on my image, when the user goes over the image a background should appear on the image with some text (see example below). My css doesn't look like it at all unfortunately. It is not in the middle and the image is not round but more like an egg.
My question now is, how can I use CSS to make the image so that it is round and when going over it the text is displayed nicely in the middle.
I also use Bootstrap as an additional library, if it should be easier.
What I have:
What I want:
Pic.js
<div class="container-profilepic">
<img src="./image.png" width="150" height="150" alt="Profibild" className="photo-preview"></img>
<div class="middle-profilepic">
<div class="text-profilepic"><i class="fas fa-camera"></i>
<div class="text-profilepic">Change it
</div>
</div>
Photo.css
.photo-preview{
width: 100% !important;
max-width: 125px !important;
height: 100% !important;
max-height: 125px!important;
border-radius: 50% !important;
}
.middle-profilepic {
transition: .5s ease;
opacity: 0;
position: absolute;
text-align: center;
}
.container-profilepic:hover .photo-preview {
opacity: 0.3;
}
.container-profilepic:hover .middle-profilepic {
opacity: 1;
}
.text-profilepic {
color: green;
font-size: 16px;
}
I checked this question befor out How do I add animated text on these images when I hover my cursor without changing current style?
Unfortunately it didn't help me.
I tried it before with top, left, postion...
.middle-profilepic {
transition: .5s ease;
opacity: 0;
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
The result
So I removed it, because the result was much closer at what I want
Solution
You need to set the parent div with position: relative and the inner content (icon + image) as position: absolute elements, stretching to fit.
If you need the avatar image to ba an img tag you can use object-fit: cover in CSS (It has wide support nowadays: https://caniuse.com/?search=object-fit).
Tips
be careful the HTML you posted is invalid, has some broken tags
I vividly suggest you move away from using heavily !important within your CSS
Working example
body {
font-family: sans-serif;
}
.profilepic {
position: relative;
width: 125px;
height: 125px;
border-radius: 50%;
overflow: hidden;
background-color: #111;
}
.profilepic:hover .profilepic__content {
opacity: 1;
}
.profilepic:hover .profilepic__image {
opacity: .5;
}
.profilepic__image {
object-fit: cover;
opacity: 1;
transition: opacity .2s ease-in-out;
}
.profilepic__content {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
color: white;
opacity: 0;
transition: opacity .2s ease-in-out;
}
.profilepic__icon {
color: white;
padding-bottom: 8px;
}
.fas {
font-size: 20px;
}
.profilepic__text {
text-transform: uppercase;
font-size: 12px;
width: 50%;
text-align: center;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/solid.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/svg-with-js.min.css" rel="stylesheet" />
<div class="profilepic">
<img class="profilepic__image" src="https://images.unsplash.com/photo-1510227272981-87123e259b17?ixlib=rb-0.3.5&q=80&fm=jpg&crop=faces&fit=crop&h=200&w=200&s=3759e09a5b9fbe53088b23c615b6312e" width="150" height="150" alt="Profibild" />
<div class="profilepic__content">
<span class="profilepic__icon"><i class="fas fa-camera"></i></span>
<span class="profilepic__text">Edit Profile</span>
</div>
</div>
Solution
Create a container with relative position and fixed height and width
Add an image as a background image respective to the container size
Add content with position: absolute
solution using bootstrap-5
.container-profilepic {
width: 150px;
height: 150px;
}
.photo-preview {
background-image: url( https://images.unsplash.com/photo-1531427186611-ecfd6d936c79?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80 );
background-size: cover;
background-position: center;
}
.middle-profilepic {
background-color: rgba( 255,255,255, 0.69 );
}
.container-profilepic:hover .middle-profilepic {
display: flex!important;
cursor: pointer;
}
<!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 href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous">
</head>
<body>
<div class="container-profilepic card rounded-circle overflow-hidden">
<div class="photo-preview card-img w-100 h-100"></div>
<div class="middle-profilepic text-center card-img-overlay d-none flex-column justify-content-center">
<div class="text-profilepic text-success">
<i class="fas fa-camera"></i>
<div class="text-profilepic">Change it</div>
</div>
</div>
</div>
</body>
</html>
.image {
position: relative:
}
.text-div {
position: abolute;
top: 10px;
left:40%;
}
Also img tag it's self-closing tag
The red element is disappearing while scrolling and I don't know what to do.
I am trying to do a custom scroll by element linked to parts of body.I don't know why this is happening. How do I fix it?
html{
margin: 0;
padding: 0;
height: 400%;
}
> This part of the code is working on a moving background stars
#keyframes move-twink-back {
from {background-position:0 0;}
to {background-position:-10000px 5000px;}
}
#-webkit-keyframes move-twink-back {
from {background-position:0 0;}
to {background-position:-10000px 5000px;}
}
#-moz-keyframes move-twink-back {
from {background-position:0 0;}
to {background-position:-10000px 5000px;}
}
#-ms-keyframes move-twink-back {
from {background-position:0 0;}
to {background-position:-10000px 5000px;}
}
::-webkit-scrollbar {
display:none;
}
.stars, .twinkling, .clouds {
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
width:100%;
height:400vh;
display:block;
}
.stars {
background:#000 url(stars-bg.png) repeat top center;
z-index:0;
}
.twinkling{
background:transparent url(twinkling-bg.png) repeat top center;
z-index:1;
-moz-animation:move-twink-back 600s linear infinite;
-ms-animation:move-twink-back 900s linear infinite;
-o-animation:move-twink-back 900s linear infinite;
-webkit-animation:move-twink-back 900s linear infinite;
animation:move-twink-back 900s linear infinite;
}
**code of far right element**
.cont{
height: 50%;
width: 96.5%;
float: left;
}
.conm{
height: 50%;
width: 3.5%;
float: left;
background-color: #0a0a0a;
top: 0;
position: sticky;
}
.point-tb{
height: 10px;
width: 10px;
border-radius: 100%;
border: 6.5px solid #f00;
position: relative;
display: block;
margin-left: auto;
margin-right: auto;
margin-top: 50%;
}
.scroll-1{
height: 100px;
width: 8px;
background-color: #f00;
position: relative;
display: block;
margin-left: auto;
margin-right: auto;
margin-top: -5%;
}
<!DOCTYPE HTML>
<html lang="pl">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<link rel="stylesheet" href="styles.css">
<script src="https://kit.fontawesome.com/b5945c3b13.js" crossorigin="anonymous"></script>
</head>
<body>
<div class="stars"></div>
<div class="twinkling">
<div class="cont"></div>
<div class="conm">
<div class="point-tb"></div>
<div class="scroll-1"></div>
</div>
</div>
</div>
</body>
</html>
The red element is scrolling because of the following CSS properties.
html{
margin: 0;
padding: 0;
height: 400%; /* This Here */
}
.stars, .twinkling, .clouds {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 400vh; /* and this here */
display: block;
}
Setting the html element to beyond 100% height is considered bad practice. Remove the height attribute from each and this will fix your problem.
html{
margin: 0;
padding: 0;
}
.stars, .twinkling, .clouds {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
display: block;
}
Why is this happening? Most browsers by default will enable user scrolling whenever the HTML document extends passed 100% of the height or 100% the width. Since you are setting the html element and .stars, .twinkling, and .clouds to have a height value beyond 100%, the user can scroll down. When the user scrolls down the red element is moved up. The red element never moves, the page does.
If you attempting to create a custom slider I would wrap everything in a div, like this:
<div class="container">
<div class="scrollbar">
<!-- Scroll bar style elements. -->
</div>
<div class="content">
<!-- Content to be scrolled. -->
</div>
</div>
Then set the .content class to have a height property of beyond 100%. Then you can use JavaScript to animate your scrollbar element based on content scrolling offset. This method will require JavaScript and use of the position: fixed; or position: absolute; CSS property. This essentially will attach the element to a particular area on the screen and prevent it from moving unless you tell it to. You will also need to use overflow: hidden; to disable the browsers auto scroll functionality for the content element. You can read more about the position property and overflow property here by w3schools: https://www.w3schools.com/cssref/pr_class_position.asp,
https://www.w3schools.com/cssref/pr_pos_overflow.asp
--
Alternatively, if you main goal is just to style a custom scrollbar, look into ::scrollbar pseudo selector. You can read more about this here: https://www.w3schools.com/howto/howto_css_custom_scrollbar.asp
--
In addition to the element, use /* Comment Here */ to insert CSS comments. Use <!-- Comment Here --> to insert HTML comments. I believe this was added after copying and pasting into stack overflow, but not using comments correctly can cause rendering issues.
Try to use position:fixed in you css.
I have a simple webpage I'm working on, and I wanted to add a search bar to the page. However, when I added the search bar, it wouldn't let me click/type in the bar. I eventually found out that I was able to click/type into it after removing this div:
<div class="imagediv">
<img src="src/smallpaw.png">
</div>
This is used to put a logo on the header of my page, and I haven't been able to figure out why this breaks the search input. Obviously I want to keep this logo on my header, but any help would be appreciated.
Here is my index.html:
<!DOCTYPE html>
<html>
<head>
<style>
body {
#background: url("src/header.png") no-repeat;
}
</style>
<link
href="https://fonts.googleapis.com/css?family=Roboto:300"
rel="stylesheet"
/>
<link rel="stylesheet" type="text/css" href="src/styles.css" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
input[type="text"] {
width: 130px;
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
font-size: 16px;
background-color: white;
background-image: url("searchicon.png");
background-position: 10px 10px;
background-repeat: no-repeat;
padding: 12px 20px 12px 10px;
-webkit-transition: width 0.4s ease-in-out;
transition: width 0.4s ease-in-out;
}
input[type="text"]:focus {
width: 100%;
}
input[type="text"]::placeholder {
/* Firefox, Chrome, Opera */
text-align: left;
}
input[type="text"]::-ms-input-placeholder {
/* Microsoft Edge */
text-align: left;
}
</style>
</head>
<body>
<div class="header"></div>
<div class="imagediv">
<img src="src/smallpaw.png">
</div>
<h1>  Student Information</h1>
<br />
<form>
<input type="text" name="search" placeholder="Search" />
</form>
</body>
</html>
and here is my styles.css:
h1 {
font-family: "Roboto", "Arial";
}
.header {
overflow: hidden;
background-color: #522e81;
position: relative;
z-index: 1;
height: 77px;
}
.imagediv {
position: absolute;
top: 0px;
left: 0px;
z-index: 100;
max-width: 10%;
max-height: 10%;
}
input[type="text"] {
width: 130px;
-webkit-transition: width 0.4s ease-in-out;
transition: width 0.4s ease-in-out;
}
/* When the input field gets focus, change its width to 100% */
input[type="text"]:focus {
width: 30%;
}
Your imageDiv should be placed inside header div. That's the reason it's overlapping with input box and you are not able to type. Hope it helps man!
Trying to get the header and images under it right in the middle of the page but am having a lot of trouble figuring out how to do that. Tried manipulating the box model with no luck. I'm really new to this stuff so any advice helps.
body {
background: radial-gradient(gold, goldenrod);
font-family: monospace;
text-align: center;
font-size: 1.5rem;
position: relative;
}
img {
padding: 10px;
}
img:hover {
transform: scale(1.4);
transition:all 1s;
}
.container {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
min-height: 400px;
}
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Choose Your Weapon</h1>
<div class="container">
<img src="images/rock.svg" alt="rock">
<img src="images/paper.svg" alt="paper">
<img src="images/scissors.svg" alt="scissors">
<p></p>
</div>
<script src="app.js"></script>
</body>
</html>
You could use flexbox for this
body {
height: 100vh;
background: radial-gradient(gold, goldenrod);
font-family: monospace;
font-size: 1.5rem;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
img {
padding: 10px;
}
img:hover {
transform: scale(1.4);
transition: all 1s;
}
<h1>Choose Your Weapon</h1>
<div class="container">
<img src="images/rock.svg" alt="rock">
<img src="images/paper.svg" alt="paper">
<img src="images/scissors.svg" alt="scissors">
<p></p>
</div>
Try something like this:
body {
background: radial-gradient(gold, goldenrod);
font-family: monospace;
text-align: center;
font-size: 1.5rem;
position: relative;
}
img {
padding: 10px;
}
img:hover {
transform: scale(1.4);
transition: all 1s;
}
.container {
width: auto;
margin: auto;
}
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Choose Your Weapon</h1>
<div class="container">
<img src="images/rock.svg" alt="rock">
<img src="images/paper.svg" alt="paper">
<img src="images/scissors.svg" alt="scissors">
<p></p>
</div>
<script src="app.js"></script>
</body>
</html>
Issue is positioning and use of property left, top which even hide top text when you reduce screen size, instead you can change it's position to relative and then use margin to align that at center of page,
body {
background: radial-gradient(gold, goldenrod);
font-family: monospace;
text-align: center;
font-size: 1.5rem;
position: relative;
}
img {
padding: 10px;
}
img:hover {
transform: scale(1.4);
transition: all 1s;
}
.container {
position: relative;
min-height: 400px;
background: red;
margin: auto;
display: inline-block;
}
<h1>Choose Your Weapon</h1>
<div class="container">
<img src="http://via.placeholder.com/100x100" alt="rock">
<img src="http://via.placeholder.com/100x100" alt="paper">
<img src="http://via.placeholder.com/100x100" alt="scissors">
<p></p>
</div>
Alright, so this can be done by a dirty little trick i learned when i started. Before i get to that, i would like to make some changes to your code:
A) No need for setting position: relative; for body because all the elements automatically move in relation to the body of your page. Setting the position to relative means that you are confining the position element of everything inside the body as relative. So it will ignore the absolute of the .container class.
B) Second, i don't see a reason why if you want to keep the header and the images together, you do not keep them under a single class. It makes it easier to move them around together rather than shifting one by one.
Now to the trick, for starters, you need to set the min-heightand min-width
of the container class in pixels. Once you have done that, you can position the class at the middle by:
top: 50%;
left:50%;
margin-top: -200px; /*half of the height of the container*/
margin-left: -200px; /*half of the width of the container*/
So, now your code, all summed up must something like this:
body {
background: radial-gradient(gold, goldenrod);
font-family: monospace;
text-align: center;
font-size: 1.5rem;
}
img {
padding: 10px;
}
img:hover {
transform: scale(1.4);
transition:all 1s;
}
.container {
position: absolute;
min-width: 400px;
min-height: 200px;
top:50%;
left: 50%;
margin-top: -100px;
margin-left: -200px;
}
<body>
<div class="container">
<h1>Choose Your Weapon</h1>
<img src="images/rock.svg" alt="rock">
<img src="images/paper.svg" alt="paper">
<img src="images/scissors.svg" alt="scissors">
<p></p>
</div>
<script>
</script>
</body>
and guess what, it's even responsive :)
I am currently trying to learn CSS3 techniques to implement on my website. I found this code online for sliding image boxes (http://www.pixelforlife.com/html-css3-sliding-image-boxes/). When you hover over the boxes, its supposed to move upwards revealing the text hidden behind it. The problem is when I run it on chrome, firefox or IE the smooth transition effect doesn't work. I tried to change the webkit values and stuff but still couldn't get it to work. Any help would be greatly appreciated.
Thanks
<!doctype html>
<html lang="en">
<head>
<title> www.PixelForLife.com - Sliding Block </title>
<style type="text/css">
body { font: 13px sans-serif; }
#montage-wrap { width: 820px; height: 200px; }
.montage-block { width: 200px; height: 200px; float: left; display: block; overflow: hidden; position: relative;
margin: 0 4px 0 0; background: white; border: 1px solid #666;}
.montage-block:last-child { margin: 0; } /* removes margin on last block */
#block1 { width: 200px; height: 200px; position: absolute; display: block;
background: url("pixelforlife_thumb.png") no-repeat;
-webkit-transition: top .3s ease-in-out; }
.montage-block:hover #block1 { top: -150px; }
.thumb_content { padding: 70px 15px 0 15px; color: #777; }
.thumb_content h1 { margin: 0 0 5px 0; color: #666; font-size: 14px; }
</style>
</head>
<body>
<div id="montage-wrap">
<div class="montage-block">
<span id="block1"></span>
<div class="thumb_content">
<h1>Sample Title</h1>
<p>This is some sample title. yay for text.</p>
</div>
</div> <!-- block end -->
<!-- A sample Block -->
<div class="montage-block">
<span id="block1"></span>
<div class="thumb_content">
<h1>Sample Title</h1>
<p>This is some sample title. yay for text.</p>
</div>
</div> <!-- block end -->
</div> <!-- montage wrap -->
</body>
</html>
i changed the css position: top to margin:top
Its worked for me
#block1 {
width: 200px;
height: 200px;
position: absolute;
transition: all 0.5s ease-in-out;
}
.montage-block:hover #block1 {
margin-top: -100px;
}
Demo
probably this is the one you wanted
DEMO HERE
#block1 {
background: url("pixelforlife_thumb.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
display: block;
height: 200px;
position: absolute;
top: 0;
transition-delay: 0.5s;
transition-duration: 1.5s;
transition-property: top;
width: 200px;
}
and on hover
#block1:hover {
top: -150px ;
}
don't use same id on same page. an ID is unique per page.
You have 2 span with the same id :
<span id="block1"></span>
Change id="block1" to class="block1" and don't forget to change it in your css too.