I've got four columns (25% width each) that take up 100% width and height of the screen. The idea is to have one image associated with each column, and when a user hovers over each column, the image changes to correspond with the text/icon in the column (the image itself should take up 100% width/height).
Is something like this possible with only HTML + CSS? I'm assuming I'd need some JS.
So far, I've got it set up where everything 'works', except for the image spanning across all of the columns. I've tried changing:
.col:hover { width: 100%; }
This seems to work okay for the first column, but the others flicker and glitch upon hover.
Check out the code below (I'm just using color blocks as images for now) /
Or view on CodePen here: https://codepen.io/sdorr/pen/VqLzBQ
<!doctype html>
<head></head>
<body>
<div class="container">
<a class="button" href="#">learn more</a>
<div class="col col-1">
<div class="vertical-align">
<h1 class="hero-text">data</h1>
</div>
</div>
<div class="col col-2">
<div class="vertical-align">
<h1 class="hero-text">intelligence</h1>
</div>
</div>
<div class="col col-3">
<div class="vertical-align">
<h1 class="hero-text">experience</h1>
</div>
</div>
<div class="col col-4">
<div class="vertical-align">
<h1 class="hero-text">activation</h1>
</div>
</div>
</div>
</body>
<style>
* {
margin: 0;
padding: 0;
font-family: sans-serif;
}
.container {
width: 100%;
height: 100vh;
position: relative;
}
.col {
display: inline;
float: left;
width: 25%;
height: 100vh;
background-color: red;
position: relative;
text-align: center;
z-index: 0;
overflow: hidden;
}
.button {
padding: 20px 0;
width: 100%;
background-color: purple;
color: #ffffff;
text-decoration: none;
text-align: center;
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
z-index: 1;
}
.button:hover {
background-color: orange;
}
.col-1:hover {
background-color: pink;
}
.col-2:hover {
background-color: blue;
}
.col-3:hover {
background-color: green;
}
.col-4:hover {
background-color: yellow;
}
.vertical-align {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 100%;
}
</style>
</html>
Use an image instead of a color, and get it to cover the whole element:
.col-1:hover {
background-image: url(...);
background-repeat: no-repeat;
background-size: cover;
}
.col-1:hover {
background-color: pink;
background-image: url(...);
background-repeat: no-repeat;
width: 100%
}
How about this? It works on my side.
https://codepen.io/progr4mm3r/pen/maJBda
I've made some good progress on this issue and figured I'd post where I'm at so far. There's definitely still some kinks that need to be worked out, but it's coming along nicely.
The concept came from Joshua Johnson
Check out the CodePen or the source code below:
<!doctype html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="container">
<nav>
<ul>
<div class="col">
<li>
data
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSGTVf63Vm3XgOncMVSOy0-jSxdMT8KVJIc8WiWaevuWiPGe0Pm">
</li>
</div>
<div class="col">
<li>
intelligence
<img src="https://www.w3schools.com/w3css/img_lights.jpg">
</li>
</div>
<div class="col">
<li>
experience
<img src="https://www.gettyimages.ie/gi-resources/images/Homepage/Hero/UK/CMS_Creative_164657191_Kingfisher.jpg">
</li>
</div>
<div class="col">
<li>
activation
<img src="https://www.gettyimages.com/gi-resources/images/CreativeLandingPage/HP_Sept_24_2018/CR3_GettyImages-159018836.jpg">
</li>
</div>
</ul>
</nav>
<img src="https://helpx.adobe.com/nz/stock/how-to/visual-reverse-image-search/_jcr_content/main-pars/image.img.jpg/visual-reverse-image-search-v2_1000x560.jpg">
</div>
</body>
<style>
* {
margin: 0;
padding: 0;
font-family: sans-serif;
}
body {
background: #333;
}
.col {
width: 24.9%;
height: 100vh;
float: left;
display: inline;
border-right: 1px dashed #ffffff;
text-align: center;
}
.col:last-child {
border-right: none;
}
.container {
position: relative;
overflow: hidden;
width: 100%;
height: 100vh;
}
.container img {
position: absolute;
top: 0;
left: 0;
z-index: -60;
width: 100%;
height: 100vh;
}
.container li img {
position: absolute;
top: 0;
left: 100%;
z-index: -50;
/*transition: all 1s ease;*/
width: 100%;
height: 100vh;
}
nav {
width: 100%;
height: 100vh;
}
ul {
width: 100%;
height: 100vh;
list-style: none;
text-align: center;
}
li {
width: 100%;
height: 100vh;
display: flex;
padding-top: 100px;
}
li a {
z-index: 1;
color: #ffffff;
text-decoration: none;
font-size: 36px;
width: 100%;
height: 100vh;
}
li a:hover + img {
left: 0;
}
</style>
<script type="text/javascript">
</script>
</html>
Related
I have a project that contains a header. This header consists of a certain background color and text color. These colors aren't going well with one part of the website. So I want to transition the header to different colors. But I want the colors to change gradually at the border and not swap immediately.
The headers should transition from one color to the other at the border of the container when entering and leaving. But I don't seem to get this to work.
body {
height: 300rem;
margin: 0;
padding: 0;
}
#main-container {
width: 100%;
height: 100%;
background-color: red;
}
#header {
width: 100%;
height: 2rem;
background-color: blue;
position: sticky;
top: 0;
}
#someDiv {
position: relative;
width: 100%;
height: 20rem;
background-color: purple;
margin-top: 30rem;
}
#headerSomeDiv {
width: 100%;
height: 2rem;
background-color: green;
color: white;
position: sticky;
top: 0;
}
<body>
<div id="main-container">
<div id="header">
<h1>HEADER</h1>
</div>
<div id="someDiv">
<div id="headerSomeDiv">
<h1>HEADER</h1>
</div>
</div>
</div>
</body>
position:fixed can do this
body {
height: 300rem;
margin: 0;
}
#main-container {
height: 100%;
background-color: red;
clip-path:inset(0); /* to clip the position:fixed to its container */
overflow:auto;
}
#header,
#headerSomeDiv{
width: 100%;
height: 2rem;
background-color: blue;
position: fixed;
top: 0;
}
#headerSomeDiv {
background-color: green;
color: white;
}
h1 {
margin:0;
}
#someDiv {
position: relative;
height: 20rem;
background-color: purple;
margin-top: 30rem;
clip-path:inset(0); /* to clip the position:fixed to its container */
}
<body>
<div id="main-container">
<div id="header">
<h1>HEADER</h1>
</div>
<div id="someDiv">
<div id="headerSomeDiv">
<h1>HEADER</h1>
</div>
</div>
</div>
</body>
I am having a really difficult time trying to figure out why this is happening before I move further along in my development process of this page.
I have a very basic setup:
Fixed Footer
Fixed Header
A col-lg-3 nav bar
A col-lg-9 content box
The problem I am having is the div widths inside the nav col-lg-3 are not taking up the full width of the parent div. They appear to want to sit next to each other., even though I haven't declared a float -- and I have even tried clear:both between them. The div with ID of projects is supposed to be below the div with ID problem-div What am I doing wrong, or not understanding in order for this to happen?
NOTE The reason I am assuming this is a Bootstrap issue, is because if I remove the links to the CDN, the html / css functions as expected.
html,
body {
font-family: 'Montserrat', sans-serif;
margin: 0;
padding: 0;
height: 100%;
}
.main-wrapper {
height: 100%;
width: 100%;
background-color: #DDD;
}
#header {
position: fixed;
height: 70px;
top: 0;
left: 0;
width: 100%;
background-color: #FFF;
display: flex;
color: #ED6F2B;
text-align: center;
}
#footer {
position: fixed;
height: 70px;
bottom: 0;
left: 0;
width: 100%;
background-color: #FFF;
}
#info-column {
float: left;
display: flex;
background-color: #CCC;
margin-top: 70px;
overflow-x: hidden;
overflow-y: scroll;
height: calc(100% - 140px);
}
#map-column {
float: left;
display: flex;
background-color: #93E7ED;
margin-top: 70px;
overflow: hidden;
height: calc(100% - 140px);
}
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div id="header">
HEADER
</div>
<div class="main-wrapper">
<div id="info-column" class="col-lg-3">
<div id="problem-div" class="text-center">
<div>
<img style="width:45%" alt="" src="logo.png">
</div>
<div>
<h2>THIS PERSON'S COMPANY AND SERVICES</h2>
</div>
<div>(555) 555-5555</div>
<div>person#thispersonscompanyandservices.com</div>
<div>thispersonscompanyandservices.com</div>
</div>
<div id="projects">
PROJECTS
</div>
</div>
<div id="map-column" class="col-lg-9">
MAP CONTENT
</div>
</div>
<div id="footer">
FOOTER
</div>
This is not bootstrap related. If you remove it you will get the same issue:
html,
body {
font-family: 'Montserrat', sans-serif;
margin: 0;
padding: 0;
height: 100%;
}
.main-wrapper {
height: 100%;
width: 100%;
background-color: #DDD;
}
#header {
position: fixed;
height: 70px;
top: 0;
left: 0;
width: 100%;
background-color: #FFF;
display: flex;
color: #ED6F2B;
text-align: center;
}
#footer {
position: fixed;
height: 70px;
bottom: 0;
left: 0;
width: 100%;
background-color: #FFF;
}
#info-column {
float: left;
display: flex;
background-color: #CCC;
margin-top: 70px;
overflow-x: hidden;
overflow-y: scroll;
height: calc(100% - 140px);
}
#map-column {
float: left;
display: flex;
background-color: #93E7ED;
margin-top: 70px;
overflow: hidden;
height: calc(100% - 140px);
}
<div id="header">
HEADER
</div>
<div class="main-wrapper">
<div id="info-column" class="col-lg-3">
<div id="problem-div" class="text-center">
<div>
<img style="width:45%" alt="" src="logo.png">
</div>
<div>
<h2>THIS PERSON'S COMPANY AND SERVICES</h2>
</div>
<div>(555) 555-5555</div>
<div>person#thispersonscompanyandservices.com</div>
<div>thispersonscompanyandservices.com</div>
</div>
<div id="projects">
PROJECTS
</div>
</div>
<div id="map-column" class="col-lg-9">
MAP CONTENT
</div>
</div>
<div id="footer">
FOOTER
</div>
And this is due to the use of display:flex within #info-column. The default direction is row making both child divs next to each other. Switch to a column direction or simply remove display:flex
html,
body {
font-family: 'Montserrat', sans-serif;
margin: 0;
padding: 0;
height: 100%;
}
.main-wrapper {
height: 100%;
width: 100%;
background-color: #DDD;
}
#header {
position: fixed;
height: 70px;
top: 0;
left: 0;
width: 100%;
background-color: #FFF;
display: flex;
color: #ED6F2B;
text-align: center;
}
#footer {
position: fixed;
height: 70px;
bottom: 0;
left: 0;
width: 100%;
background-color: #FFF;
}
#info-column {
float: left;
display: flex;
flex-direction:column;
background-color: #CCC;
margin-top: 70px;
overflow-x: hidden;
overflow-y: scroll;
height: calc(100% - 140px);
}
#map-column {
float: left;
display: flex;
background-color: #93E7ED;
margin-top: 70px;
overflow: hidden;
height: calc(100% - 140px);
}
<div id="header">
HEADER
</div>
<div class="main-wrapper">
<div id="info-column" class="col-lg-3">
<div id="problem-div" class="text-center">
<div>
<img style="width:45%" alt="" src="logo.png">
</div>
<div>
<h2>THIS PERSON'S COMPANY AND SERVICES</h2>
</div>
<div>(555) 555-5555</div>
<div>person#thispersonscompanyandservices.com</div>
<div>thispersonscompanyandservices.com</div>
</div>
<div id="projects">
PROJECTS
</div>
</div>
<div id="map-column" class="col-lg-9">
MAP CONTENT
</div>
</div>
<div id="footer">
FOOTER
</div>
I want to announce on the top and header in the bottom but this is the output in every browser what am I doing wrong here
https://pasteboard.co/I67sPCe.png
this is my HTML code: https://hastebin.com/bocacehoka.js
this is my CSS code: https://hastebin.com/zapegulomu.css
.announce {
height: 45px;
width: 100%;
position: relative;
}
.header {
position: absolute;
height: 130px;
background: blue;
width: 100%;
bottom: 0;
}
<div class="announce">
<div class="header">
<img src="img/logo.png">
</div>
</div>
since you had bottom:0 to .header, the height of it was getting increased towards the top. Hope this helps thanks
.announce {
height: 45px;
width: 100%;
position: relative;
}
.header {
position: absolute;
height: 130px;
background: blue;
width: 100%;
/* bottom: 0; */
}
<div class="announce">
<div class="header">
<img src="img/logo.png" alt="image">
</div>
</div>
nested divs cannot be placed independently. Have two separate elements. consider the following.
announce {
height: 45px;
width: 100%;
position: relative;
}
.header {
position: absolute;
height: 130px;
background: blue;
width: 100%;
bottom: 0;
}
<div class="announce">
This is some announcement
</div>
<div class="header">
<img src="img/logo.png">
</div>
I have added the code as per your reference image. You can adjust the announce and header height optionally.
.announce {
height: 45px;
width: 100%;
position: relative;
}
.header {
background: blue;
width: 100%;
height: 50px;
}
.header img {
max-width: 100%;
max-height: 50px;
}
<div class="announce">
<div class="header">
<img src="https://via.placeholder.com/300x100">
</div>
</div>
You have to give the margin to .header img
.announce {
position: relative;
height: 45px;
width: 100%;
}
.header {
position: absolute;
height: 130px;
background: blue;
width: 100%;
bottom: 0;
}
.header img {
margin: 82px 5px 0;
}
<div class="announce">
<div class="header">
<img src="img/logo.png">
</div>
</div>
What I have
A header that is fixed
Inside the header is a piece of text in the top right
When I click on the text an absolute positioned div appears underneath it with some 'options'
In the main content I also have a column on the right that's fixed with a button inside
The Issue
When clicking the text to display the absolute position div 'overlay', the button appears 'on top' of it.
Question
How do I ensure that when I click the text and the additional panel appears, that it appears on top of everything else?
Some quick code to demonstrate
If you click on the text in the top right, you'll see the issue.
$('.text').click(function(){
$('.dropdown').toggle();
});
body {
margin: 0;
padding: 0;
}
.wrapper {
width: 100%;
float: left;
}
.header {
width: 100%;
height: 70px;
position: fixed;
background: #ebebeb;
}
.text {
width: 200px;
float: right;
position: relative;
}
.text .dropdown {
width: 100%;
position: absolute;
top: 65px;
right: 0;
background: #888;
display: none;
}
.text .dropdown ul {
width: 100%;
float: left;
margin: 0;
padding: 0;
list-style: none;
}
.content {
width: 100%;
height: 100%;
float: left;
margin-top: 80px;
}
.content .right-col {
width: 30%;
height: 200px;
float: right;
background: #ebebeb;
}
.content .actions {
width: 100%;
position: fixed;
top: 80px;
right: 10px;
}
.content .button {
padding: 20px;
float: right;
background: green;
color: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<div class="header">
<div class="text">
<span> Some text </span>
<div class="dropdown">
<ul>
<li> Text </li>
<li> Text </li>
</ul>
</div>
</div>
</div>
<div class="content">
<div class="right-col">
<div class="actions">
<div class="button"> Button </div>
</div>
</div>
</div>
</div>
Set your z-index of your header class lets say 1001 and then set z-index:1000 action class.
.header {
width: 100%;
height: 70px;
position: fixed;
background: #ebebeb;
z-index:1001;
}
.content .actions {
width: 100%;
position: fixed;
top: 80px;
right: 10px;
z-index:1000; /* less then the header*/
}
Hope this helps.
$('.text').click(function(){
$('.dropdown').toggle();
});
body {
margin: 0;
padding: 0;
}
.wrapper {
width: 100%;
float: left;
}
.header {
width: 100%;
height: 70px;
position: fixed;
background: #ebebeb;
}
.text {
width: 200px;
float: right;
position: relative;
}
.text .dropdown {
z-index:100;
width: 100%;
position: absolute;
top: 65px;
right: 0;
background: #888;
display: none;
}
.text .dropdown ul {
width: 100%;
float: left;
margin: 0;
padding: 0;
list-style: none;
}
.content {
width: 100%;
height: 100%;
float: left;
margin-top: 80px;
}
.content .right-col {
width: 30%;
height: 200px;
float: right;
background: #ebebeb;
}
.content .actions {
width: 100%;
position: fixed;
top: 80px;
right: 10px;
}
.content .button {
padding: 20px;
float: right;
background: green;
color: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<div class="header" style="z-index:199;">
<div class="text">
<span> Some text </span>
<div class="dropdown" >
<ul>
<li> Text </li>
<li> Text </li>
</ul>
</div>
</div>
</div>
<div class="content">
<div class="right-col">
<div class="actions">
<div class="button"> Button </div>
</div>
</div>
</div>
</div>
<div class="header" style="z-index:199;">
I am creating the homepage of a website for a school assignment, but my webpage doesn't scroll so the offscreen divs are not visible. I have browsed this forum and the web studying the solutions proposed to other relevant questions, but they don't seem to work for me.
I put my code below (I have removed those parts which are not relevant)... please, can somebody tell me what is wrong?
Thanks in advance for any help.
*{margin: 0; box-sizing: border-box}
body {
height: 100vh;
overflow-y: scroll;
}
.wrap {
width: 59em;
margin: 0 auto;
height: 100%
}
img.resize {
width: 944px;
}
#header {
background: url("...") 100% no-repeat;
background-position: center center;
position: fixed;
right: 0;
left: 0;
top:0;
display: block;
width: 100%;
height: 14.37em;
}
#testo-header{
background-color: white;
height: 4.375em;
width: 50%;
position: absolute;
top: 5em;
left: 0;
text-align: center;
line-height: 4.375em;
z-index: 2;
padding-left: 8em;
}
#testo-header:before {
content: '\0020';
background-image: url(...);
background-repeat: no-repeat;
width: 100%;
height:5.625em;
display:block;
position: absolute;
left: 11.25em;
z-index: -1;
}
ul#nav {
background-color: white;
height: 70px;
width: 50%;
position: absolute;
top: 80px;
right: 0;
font-family: 'Hind', sans-serif;
font-size: 1em;
font-weight: bold;
list-style-type: none;
line-height: 35px;
display: block;
z-index: 5;
}
ul#nav li {
float: left;
text-align: center;
vertical-align: text-top;
padding: 20px;
}
#main {
background-color: white;
position: relative;
top:1em;
}
#title {
height: 15em;
position: relative;
border-top: 1px solid #888888;
width: 944px;
margin: 0 auto;
line-height: 36px;
padding-top: 20px;
padding-bottom: 20px;
}
ul#social {
list-style: none;
display: block;
position: absolute;
top: 20px;
right: 0;
}
ul#social li {
padding: 3px;
float: left;
}
#content {
background-color: white;
display: block;
position: relative;
width: 600px;
height: 400px;
top: 120px;
}
#ingredienti {
height: 300px;
position: relative;
}
#footer {
position: absolute;
bottom: 0;
}
<!DOCTYPE html>
<html>
<head>
<title>My site</title>
<link rel="stylesheet" type="text/css" href="style2.css"/>
<link href="https://fonts.googleapis.com/css?family=Hind|Play" rel="stylesheet">
</head>
<body>
<div id="header">
<div class="wrap">
<div id="testo-header">
<h1>Tomatoes</h1>
</div>
<ul id="nav">
<li>Home</li>
<li>Ricette</li>
<li>Categorie</li>
<li>Blog</li>
<li>Contatti</li></li>
</ul>
</div>
<div id="main">
<div class="wrap">
<div id="title">
Starters
<ul id="social">
<li><img src="..." width="25" height="25"></li>
<li><img src="..." width="25" height="25"></li>
<li><img src="..." width="25" height="25"></li>
</ul>
<h2>salad</h2>
<img class="resize" src="...">
</div>
<div id="content">
<div id="ingredients">
<h3>Ingredients</h3>
</div>
<div id="comments"></div>
</div>
<div id="aside">
</div>
</div>
</div>
<footer>
<div class="wrap">
<div class="column">
<h4>Informazioni</h4>
</div>
<div class="column">
<h4>Categorie</h4>
</div>
<div class="column">
<h4>Mangiare fuori</h4>
</div>
<div id="bottom">
<h5>Newsletter</h5>
</div>
</div>
</footer>
</body>
</html>
You are missing a close div starting from where you opened the <div id="header">, add that and the scroll bar will appear