I'm trying place pictures as links, while having some hover effect on the image. Neither the hover effect or the link work at the moment.
I tried to use :hover on different elements, I tried to use z-index, I tried to check on selector specificity, but something stops hover effect entirely, but I can't see what's going wrong.
<div class="fourthsection">
<h1>Recent Projects</h1>
<div class="projectpic-container">
<div class="picbox">
<div class= "imgBox">
</div>
</div>
<div class="picbox">
<div class= "imgBox">
</div>
</div>
<div class="picbox">
<div class= "imgBox">
</div>
</div>
<div class="picbox">
<div class= "imgBox">
</div>
</div>
</div>
</div>
.fourthsection{
background-color: rgb(247, 197, 164);
position: relative;
padding-top: 80px;
padding-bottom: 60px;
font-family: 'Nunito', sans-serif;
z-index: -2;
font-size: 10px;
}
.fourthsection h1{
position: absolute;
margin-left: 15%;
margin-right: 15%;
font-size: 1.8rem;
letter-spacing: 3px;
top:2%;
padding-top:1.5%;
}
.projectpic-container{
display: flex;
flex-direction: row;
justify-content: space-around;
margin-left: 13%;
margin-right: 15%;
padding-top: 45px;
width: 80vw;
height: 28 vh;
}
.projectpic-container .picbox{
position: relative;
width: 400px;
height: 250px;
margin: 8px;
}
.projectpic-container .picbox .imgBox{
position: relative;
}
.projectpic-container .picbox .imgBox img{
max-width: 100%;
border-radius: 4%;
-webkit-filter: sepia(100%);
filter: sepia(100%);
-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out;
}
.projectpic-container .picbox .imgBox:hover img{
transform: 0.3s ease-in;
-webkit-filter: sepia(0);
filter: sepia(0);
cursor: pointer;
-webkit-transform: 0.3s ease-in;
}
I actually don't know your whole page and I don't know if z-index is needed or not, but if you remove z-index: -2 from
.fourthsection{
background-color: rgb(247, 197, 164);
position: relative;
padding-top: 80px;
padding-bottom: 60px;
font-family: 'Nunito', sans-serif;
z-index: -2;
font-size: 10px;
}
it works just fine...here's the snippet (I obviously used an image from google with a href directed to google in target _blank)
.fourthsection{
background-color: rgb(247, 197, 164);
position: relative;
padding-top: 80px;
padding-bottom: 60px;
font-family: 'Nunito', sans-serif;
font-size: 10px;
}
.fourthsection h1{
position: absolute;
margin-left: 15%;
margin-right: 15%;
font-size: 1.8rem;
letter-spacing: 3px;
top:2%;
padding-top:1.5%;
}
.projectpic-container{
display: flex;
flex-direction: row;
justify-content: space-around;
margin-left: 13%;
margin-right: 15%;
padding-top: 45px;
width: 80vw;
height: 28 vh;
}
.projectpic-container .picbox{
position: relative;
width: 400px;
height: 250px;
margin: 8px;
}
.projectpic-container .picbox .imgBox{
position: relative;
}
.projectpic-container .picbox .imgBox img{
max-width: 100%;
border-radius: 4%;
-webkit-filter: sepia(100%);
filter: sepia(100%);
-webkit-transition: 0.3s ease-in-out;
transition: 0.3s ease-in-out;
}
.projectpic-container .picbox .imgBox:hover img{
transform: 0.3s ease-in;
-webkit-filter: sepia(0);
filter: sepia(0);
cursor: pointer;
-webkit-transform: 0.3s ease-in;
}
<div class="fourthsection">
<h1>Recent Projects</h1>
<div class="projectpic-container">
<div class="picbox">
<div class= "imgBox">
<img src="https://besthqwallpapers.com/Uploads/25-8-2016/3005/thumb2-remains-of-bridge-lake-park-kromelow-kromelow-lake-rakott.jpg" alt="Project1">
</div>
</div>
</div>
</div>
I had the same conclusion as alesssz.
Remove the z-index: -2; setting from the .fourthsection rule and things work fine. Put that setting back, and the hover action is broken.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html lang="hu" xml:lang="hu" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Page Title</title>
<link href="__imghover.css" type="text/css" rel="stylesheet" />
</head>
<body>
<main>
<div class="fourthsection">
<h1>Recent Projects</h1>
<div class="projectpic-container">
<div class="picbox">
<div class="imgBox">
<img src="http://keve.maclab.org/pub/tmp/demopic.jpg" alt="Project1" />
</div>
</div>
<div class="picbox">
<div class="imgBox">
<img src="http://keve.maclab.org/pub/tmp/demopic.jpg" alt="Project2" />
</div>
</div>
<div class="picbox">
<div class= "imgBox">
<img src="http://keve.maclab.org/pub/tmp/demopic.jpg" alt="Project3" />
</div>
</div>
<div class="picbox">
<div class= "imgBox">
<img src="http://keve.maclab.org/pub/tmp/demopic.jpg" alt="Project4" />
</div>
</div>
</div>
</div>
</main>
</body>
</html>
Please note: I replaced the flask reference with a static img url.
.fourthsection {
background-color: rgb(247, 197, 164);
position: relative;
padding-top: 80px;
padding-bottom: 60px;
font-family: 'Nunito', sans-serif;
/*z-index: -2;*/
font-size: 10px;
}
.fourthsection h1 {
position: absolute;
margin-left: 15%;
margin-right: 15%;
font-size: 1.8rem;
letter-spacing: 3px;
top:2%;
padding-top:1.5%;
}
.projectpic-container {
display: flex;
flex-direction: row;
justify-content: space-around;
margin-left: 13%;
margin-right: 15%;
padding-top: 45px;
width: 80vw;
height: 28vh;
}
.projectpic-container .picbox {
position: relative;
width: 400px;
height: 250px;
margin: 8px;
}
.projectpic-container .picbox .imgBox {
position: relative;
}
.projectpic-container .picbox .imgBox img {
max-width: 100%;
border-radius: 4%;
-webkit-filter: sepia(100%);
filter: sepia(100%);
-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out;
}
.projectpic-container .picbox .imgBox img:hover {
transform: 0.3s ease-in;
-webkit-filter: sepia(0);
filter: sepia(0);
cursor: pointer;
-webkit-transform: 0.3s ease-in;
}
Related
When I click my <a> tag for the popup box, the images in the background (with overlay effects) are glowing up, and I don't know why. If anybody know something I write the code under here.
As you can see I've put href to #popup1 in the first <a> tag, and it opens the popup box, but in the background you can see the image like glowing, the border too.
I've changed the display tag and other CSS tags, but nothing.
Here is the Codepen.
the problem is actually you add pop-up before container 2 so that's why it is glowing.
So, if you dont want to make this glow just add your pop-up division after both
containers like this.
Dont change your Css. you just have to change position of divisions like this
<div class="container1" style="cursor:default;">
<div class="container2">
<div class="content">
<a id="ant" href="#popup1" onclick="show('popup2')">
<div class="content-overlay"></div>
<img class="content-image" src="https://i.postimg.cc/5tNkjkV5/2.png" style="z-index: 0;height: 200px;width: 330px;border:2px solid rgb(205,144,76);padding:0;">
<div class="content-details fadeIn-bottom" style="background-size:cover;">
<h3 class="content-title" style="font-family: 'Roboto', sans-serif;">ANTIPASTI</h3>
<p class="content-text"></p>
</div>
</a>
</div>
</div>
<div class="container2">
<div class="content">
<a id="prim">
<div class="content-overlay"></div>
<img class="content-image" src="https://i.postimg.cc/5tNkjkV5/2.png" style="border:2px solid rgb(205,144,76);padding:0; height:200px; width:330px;">
<div class="content-details fadeIn-bottom">
<h3 class="content-title" style="font-family: 'Roboto', sans-serif;"> PRIMI PIATTI </h3>
<p class="content-text"></p>
</div>
</a>
</div>
</div>
</div>
<div id="popup1" class="popup">
×
<h2>The Popup Has Arrived</h2>
<p>QUESTI SONO GLI ANTIPASTI</p>
</div>
<a href="#ant" class="close-popup"></a
It depends on the order of your HTML-Elements. This example will fix the problem
.container1 {
display: flex;
width: 100%;
flex-wrap: wrap;
margin-top: 110px;
align-content: space-around;
justify-content: center;
transition: all 0.2s linear;
}
.container1 > div {
padding: 40px;
justify-content: center;
}
*,
*:before,
*:after {
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.main-title {
color: #2d2d2d;
text-align: center;
text-transform: capitalize;
padding: 0.7em 0;
}
.container {
padding: 1em 0;
float: left;
width: 50%;
}
#media screen and (max-width: 640px) {
.container {
display: block;
width: 100%;
}
}
#media screen and (min-width: 900px) {
.container {
width: 33.33333%;
}
}
.container .title {
color: #1a1a1a;
font-family: 'Roboto', sans-serif;
text-align: center;
margin-bottom: 10px;
}
.content {
position: relative;
width: 100%;
max-width: 400px;
height: 100%;
margin: auto;
overflow: hidden;
transition: transform 0.4s;
}
.content .content-overlay {
/* background: rgba(70,34,0);*/
background: rgba(214, 142, 60, 70%);
/* background: rgb(214,142,60);*/
position: absolute;
height: 97%;
width: 100%;
left: 30px;
top: 0;
bottom: 0;
right: 0;
opacity: 0;
-webkit-transition: all 0.4s ease-in-out 0s;
-moz-transition: all 0.4s ease-in-out 0s;
transition: all 0.4s ease-in-out 0s;
}
.content:hover .content-overlay {
opacity: 0.5;
}
.content-details {
position: absolute;
text-align: center;
padding-left: 1em;
padding-right: 1em;
width: 100%;
top: 50%;
left: 50%;
opacity: 0;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
-webkit-transition: all 0.3s ease-in-out 0s;
-moz-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
.content:hover .content-details {
top: 50%;
left: 50%;
right: 50%;
opacity: 1;
}
.content-details h3 {
color: #fff;
font-weight: 500;
text-align: center;
letter-spacing: 0.15em;
margin-bottom: 0.5em;
padding-left: 20px;
text-transform: uppercase;
}
.content-details p {
color: #fff;
font-size: 0.8em;
text-align: center;
padding-left: 20px;
}
.fadeIn-bottom {
top: 80%;
}
.fadeIn-top {
top: 20%;
}
.fadeIn-left {
left: 20%;
}
.fadeIn-right {
left: 80%;
}
h1 {
font-size: 3em;
text-align: center;
color: #00898e;
margin: 0;
padding: 30vh 0 1em;
}
h2 {
text-align: center;
white-space: nowrap;
color: #00898e;
}
a {
text-decoration: none;
color: #fff;
}
p {
text-align: left;
}
.btn {
display: inline-block;
padding: 10px 20px;
border: 2px solid #00898e;
border-radius: 10px;
transition: background 0.3s;
}
.btn:hover {
background: #00898e;
}
.popup {
position: fixed;
padding: 10px;
max-width: 500px;
border-radius: 10px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: rgba(255, 255, 255, 0.9);
visibility: hidden;
opacity: 0;
/* "delay" the visibility transition */
-webkit-transition: opacity 0.5s, visibility 0s linear 0.5s;
transition: opacity 0.5s, visibility 0s linear 0.5s;
z-index: 1;
}
.popup:target {
visibility: visible;
opacity: 1;
/* cancel visibility transition delay */
-webkit-transition-delay: 0s;
transition-delay: 0s;
}
.popup-close {
position: absolute;
padding: 10px;
max-width: 500px;
border-radius: 10px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: rgba(255, 255, 255, 0.9);
}
.popup .close {
position: absolute;
right: 5px;
top: 5px;
padding: 5px;
color: #000;
transition: color 0.3s;
font-size: 2em;
line-height: 0.6em;
font-weight: bold;
}
.popup .close:hover {
color: #00e5ee;
}
.close-popup {
background: rgba(0, 0, 0, 0.7);
cursor: default;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
opacity: 0;
visibility: hidden;
/* "delay" the visibility transition */
-webkit-transition: opacity 0.5s, visibility 0s linear 0.5s;
transition: opacity 0.5s, visibility 0s linear 0.5s;
}
.popup:target + .close-popup {
opacity: 1;
visibility: visible;
/* cancel visibility transition delay */
-webkit-transition-delay: 0s;
transition-delay: 0s;
}
<div class="container1" style="cursor: default">
<div class="container2">
<div class="content">
<a id="ant" href="#popup1" onclick="show('popup2')">
<div class="content-overlay"></div>
<img
class="content-image"
src="https://i.postimg.cc/5tNkjkV5/2.png"
style="z-index: 0; height: 200px; width: 330px; border: 2px solid rgb(205, 144, 76); padding: 0"
/>
<div class="content-details fadeIn-bottom" style="background-size: cover">
<h3 class="content-title" style="font-family: 'Roboto', sans-serif">ANTIPASTI</h3>
<p class="content-text"></p>
</div>
</a>
</div>
</div>
<div class="container2">
<div class="content">
<a id="prim">
<div class="content-overlay"></div>
<img
class="content-image"
src="https://i.postimg.cc/5tNkjkV5/2.png"
style="border: 2px solid rgb(205, 144, 76); padding: 0; height: 200px; width: 330px"
/>
<div class="content-details fadeIn-bottom">
<h3 class="content-title" style="font-family: 'Roboto', sans-serif">PRIMI PIATTI</h3>
<p class="content-text"></p>
</div>
</a>
</div>
</div>
<!-- The popup should be entered as the last element so that it overlays the other elements -->
<div id="popup1" class="popup">
×
<h2>The Popup Has Arrived</h2>
<p>QUESTI SONO GLI ANTIPASTI</p>
</div>
</div>
I am trying to make some animated effect by adding a rectangle that expands over the button when the button (not the rectangle since it's set to width: 0px;) is hovered over by the user. Though, I don't really know how to do that, so I'm blocked.
So:
There's a button.
There's a rectangle somewhere.
The rectangle is 0px width.
I want the rectangle to grow from 0 to 200px width when the button is hovered. NOT the button.
I accept javascript solutions but only like real basic ones cause I'm a beginner, I won't understand javascript if it's not explained to me.
For the moment, here's my code:
HTML:
<div class="flex-container">
<div class="sidebar">
<button style="margin-top: 100px;" onclick="Accueil()"><div style="z-index: 2;">Accueil</div></button>
<div class="rectangle" name="acc" style="top: 100px;"></div>
<button onclick="Thés()"><div style="z-index: 2;">Thés</div></button>
<div class="rectangle" name="the" style="top: 100px;"></div>
<button onclick="Tisanes()"><div style="z-index: 2;">Tisanes</div></button>
<div class="rectangle" name="tis" style="top: 100px;"></div>
<button onclick="Théières()"><div style="z-index: 2;">Théières</div></button>
<div class="rectangle" name="thei" style="top: 100px;"></div>
</div>
CSS:
.sidebar > button {
margin: 20px; /* marge de 30px entre les boutons */
width: 200px;
height: 60px;
max-height: 60px !important;
max-width: 200px !important;
background-color: #F5FAD2;
text-align: center;
font-size: 24px;
border-radius: 7%;
border: none;
transition-duration: 0.4s;
cursor: pointer;
color: #404040;
position: relative;
}
.rectangle {
width: 0px;
height: 60px;
color: rgba(255, 255, 255, 0.144);
border-radius: 7%;
border: none;
transition: width 1.1s ease 0s;
transition-timing-function: ease;
transition-delay: 0s;
position: absolute;
z-index: 1;
}
.rectangle button:hover {
width: 200px;
}
Thanks.
<button> Button </button>
button{
transition:0.2s;
}
button:hover{
width:200px
}
You can add the transform property in the button CSS class. This will work to increase the size of the rectangle. You can adjust the value inside the scale to get the desired size when hovered. Copy the CSS & HTML codes below to have that working.
CSS:
.sidebar>button {
margin: 20px;
/* marge de 30px entre les boutons */
width: 200px;
height: 60px;
max-height: 60px !important;
max-width: 200px !important;
background-color: #F5FAD2;
text-align: center;
font-size: 24px;
border-radius: 7%;
border: none;
transition-duration: 0.4s;
cursor: pointer;
color: #404040;
position: relative;
}
.btn:hover {
width: 300px;
transform: scale(1.3) perspective(0.4px);
}
.rectangle {
color: rgba(255, 255, 255, 0.144);
border-radius: 7%;
border: none;
position: absolute;
z-index: 1;
}
HTML:
<div class="flex-container">
<div class="sidebar">
<button style="margin-top: 100px;" class="btn">
<div style="z-index: 2;">Accueil</div>
</button>
<div class="rectangle" name="acc" style="top: 100px;"></div>
<button class="btn">
<div style="z-index: 2;">Thés</div>
</button>
<div class="rectangle" name="the" style="top: 100px;"></div>
<button class="btn">
<div style="z-index: 2;">Tisanes</div>
</button>
<div class="rectangle" name="tis" style="top: 100px;"></div>
<button class="btn">
<div style="z-index: 2;">Théières</div>
</button>
<div class="rectangle" name="thei" style="top: 100px;"></div>
</div>
</div>
Hope this solution helps you!
Maybe it will be useful to you
.rectangle-out {
display: inline-block;
vertical-align: middle;
-webkit-transform: perspective(1px) translateZ(0);
transform: perspective(1px) translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
position: relative;
background: #e1e1e1;
-webkit-transition-property: color;
transition-property: color;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
padding:20px;
color:#000;
text-decoration: none;
}
.rectangle-out:before {
content: "";
position: absolute;
z-index: -1;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: #2098D1;
-webkit-transform: scale(0);
transform: scale(0);
-webkit-transition-property: transform;
transition-property: transform;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}
.rectangle-out:hover, .rectangle-out:focus, .rectangle-out:active {
color: white;
}
.rectangle-out:hover:before, .rectangle-out:focus:before, .rectangle-out:active:before {
-webkit-transform: scale(1);
transform: scale(1);
}
<a class="rectangle-out" href="#">Rectangle Out</a>
Maybe it will be useful to you.
visit my GitHub page. my website total source code here. many Animation when hovering over a button
here.
https://github.com/jacksonkasi0/mhibuddy
(or) visit my website: https://mahibuddy.me
(or)
HTML:
<div class="lo">
<ul>
<li>
<a href="./love/love.html" target="_blank">
<i class="fa fa-heart"></i>
</a>
</li>
</ul>
</div>
CSS:
.lo ul {
margin: 0;
padding: 0;
display: flex;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);}
.lo > ul > li {
list-style: none;
margin: 0 15px;}
.lo > ul > li > a {
position: relative;
display: block;
width: 60px;
height: 60px;
text-align: center;
line-height: 63px;
background: #333;
border-radius: 50%;
font-size: 30px;
color: #666;
transition: 0.5s;}
.lo>ul>li>a :hover{
position: relative;
display: block;
width: 60px;
height: 60px;
text-align: center;
line-height: 63px;
background: rgb(255, 255, 255);
border-radius: 50%;
font-size: 30px;
/* color: #666; */
transition: 0.3s;}
.lo > ul > li > a::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 50%;
background: #ff05de;
transition: .5s;
transform: scale(.9);
z-index: -1;}
.lo > ul > li > a:hover::before {
transform: scale(1.1);
box-shadow: 0 0 15px #ff6e9e;}
.lo > ul > li > a:hover {
color: #ff1058;
box-shadow: 0 0 5px #ff1088;
text-shadow: 0 0 5px #ff1044;}
I think I have what you are looking for now
.flex-container {
display: flex;
flex-direction: row;
justify-content: center;
}
.rectangle {
display: none;
}
.button {
width: 200px;
height: 60px;
background-color: #F5FAD2;
text-align: center;
font-size: 24px;
border-radius: 7%;
border: none;
transition-duration: 0.4s;
cursor: pointer;
color: #404040;
position: relative;
margin-right: 20px;
}
.button:hover + .rectangle {
display: block;
width: 200px;
}
<div style="text-align:center" class="flex-container">
<div class = "button">Accueil</div>
<div class="rectangle">test</div>
<div class = "button">Thés</div>
<div class="rectangle">test</div>
<div class = "button">Tisanes</div>
<div class="rectangle">test</div>
<div class = "button">Théières</div>
<div class="rectangle">test</div>
</div>
You can checkout the fiddle I made with this info here: https://jsfiddle.net/mbmarketing4you/j92mgsy6/46/
You have to make the "rectangle" a child of the button in order for the hover effect to work.
I'm trying to add a background image to my timeline on a website, but I can't seem to move my background image up and down without it shrinking. It almost seems like there's some invisible bar keeping me from moving the image up. If it moves up, it just shrinks.
edit: Sorry for the confusion. I am wanting to move the image up in the background of the timeline. I can't move it up using top.
Initially I couldn't even get the image to show up, but now I need to use the
background-image: cover
property and it's not working as expected. I'm doing something wrong.
What I've tried:
adjusting the height and width of my elements
using Top to move the background image up/down
Here's the code for the timeline and it's styling sheets:
html {
font-size: 10px;
font-family: Raleway;
width: 100%;
height: 100%;
background: linear-gradient(#FF9940, white);
font-weight: normal;
}
h1 {
font-family: Raleway;
padding: 20px;
font-size: 53px;
text-shadow: 2px 2px 1px grey;
background-color: #1E2752;
text-align: center;
border: 5px solid black;
color: #FCFCFF;
margin-top: 10px;
}
li {
float: left;
padding-right: 30px;
}
li a {
display: block;
color: white;
text-decoration: none;
padding: 19px 16px;
border: 2px solid #ffffff;
right: -100px;
}
li a:hover {
color: #ffffff;
background: #FF9940;
transition: all 0.4s ease 0s;
}
ul {
transition: all 0.4s ease 0s;
list-style-type: none;
text-decoration: none;
font-size: 12px;
text-transform: uppercase;
color: #ffffff;
background: transparent;
display: inline-block;
position: absolute;
text-align: center;
padding: 0px;
top: 28px;
left: 23px;
right: 23px;
width: 100%;
}
h2 {
text-align: center;
font-size: 25px;
}
h2 p {
font-size: 18px;
}
.right-button {
float: right;
padding-right: 47px
}
.other-button {
float: right;
padding-right: 30px;
}
#timeline {
font-family: tahoma;
font-size: 15px;
line-height: 1.75;
padding: 0;
margin-left: 400px;
height: 400px;
width: 650px;
display: flex;
background-color: #031625;
}
.t1-item:before,
.t1-item:after {
transform: translate3d(0, 0, 0);
content: ' ';
position: absolute;
left: 0;
top: 0;
}
.t1-item {
padding: 25px;
transform: translate3d(0, 0, 0);
position: relative;
width: 25%;
margin-top: 20rem;
color: white;
overflow: hidden;
transition: width 0.5s ease;
}
.t1-item:after {
background: rgba(3, 22, 37, 0.85);
opacity: 1;
transition: opacity .5s ease;
}
.t1-item:before {
background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 75%);
z-index: 1;
opacity: 0;
transform: translate3d(0, 0, 0) translateY(50%);
transition: opacity .5s ease, transform .5s ease;
}
.t1-item:hover {
width: 30%;
}
.t1-item:hover:after {
opacity: 0;
}
.t1-item:hover:before {
opacity: 1;
transform: translate3d(0, 0, 0) translateY(0);
transition: opacity 1s ease, transform 1s ease .25s;
}
.t1-item:hover .t1-content {
opacity: 1;
transform: translateY(0);
transition: all .75s ease .5s;
}
.t1-item:hover .t1-bg {
filter: grayscale(0);
}
.t1-content {
transform: translate3d(0, 0, 0) translateY(25px);
position: relative;
z-index: 1;
text-align: center;
margin: 0.1618em;
top: 55%;
opacity: 0%;
}
.t1-content h3 {
font-family: tahoma;
text-transform: uppercase;
color: #1779cf;
font-size: 1.44rem;
font-weight: normal;
}
.t1-year {
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
border-top: 1px solid white;
border-bottom: 1px solid white;
}
.t1-year p {
font-family: tahoma;
font-size: 1.628rem;
line-height: 0;
}
.t1-bg {
transform: translate3d(0, 0, 0);
position: absolute;
left: 0;
top: 0px;
background-size: cover;
background-position: center center;
transition: filter .5se ease;
filter: grayscale(100%);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> Isabelle Kreienbrink </title>
<link href="styles/style.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Raleway&display=swap" rel="stylesheet">
</head>
<body>
<h1> Isabelle Kreienbrink </h1>
<ul>
<li>Resume</li>
<li>Academics</li>
<li>Projects</li>
<li class="right-button">Contact Info</li>
<li class="other-button">Test</li>
<li class="other-button">Testing</li>
</ul>
<h2> Welcome to my website!
<p> I hope you learn a little about me while you're here. </p>
</h2>
<section id="timeline">
<div class="t1-item">
<div class="t1-bg" style="background-image:url(https://www.eschoolnews.com/files/2016/12/computer-science-education-600x400.jpg); height: 100%; width: 100%;">
</div>
<div class="t1-year">
<p class="f2 heading">2014</p>
</div>
<div class="t1-content">
<h3>Lorem ipsum dolor </h3>
<p>
test
</p>
</div>
</div>
<div class="t1-item">
<div class="t1-bg" style="background-image:url(https://www.eschoolnews.com/files/2016/12/computer-science-education-600x400.jpg) height: 100%, width: 100%"></div>
<div class="t1-year">
<p class="f2 heading">2015</p>
</div>
<div class="t1-content">
<h3>Lorem ipsum dolor </h3>
<p>
test
</p>
</div>
</div>
<div class="t1-item">
<div class="t1-bg" style="background-image:url(001.jpeg)"></div>
<div class="t1-year">
<p class="f2 heading">2016</p>
</div>
<div class="t1-content">
<h3>Lorem ipsum dolor </h3>
<p>
test
</p>
</div>
</div>
</section>
</body>
</html>
I am a noob at HTML/CSS, and I'm trying to put a timeline on my website. I've run into a strange issue: I have a weird block of space under my #timeline class anytime I try to change the height.
What I've tried: I've read some posts about absolute/relative positioning and how if you try to change the height with An absolute or relatively positioned object, it will leave a gap of space between where it is and where it used to be.
With this information, I'm not sure how to reposition my timeline elements without using absolute positioning, because I don't want the timeline to be too large. Any recommendations or tips would be great. here's my code (please view in full window - timeline has some compatibility issues with safari right now:( use chrome if you can)
My CSS is kind of long, but I wanted you to see the whole webpage and understand how It all worked together. I experienced the issue after styling the body and #timeline component, so I believe the styling below these components is causing the issues.
Any pointers would be appreciated.
html{
font-size: 10px;
font-family: Raleway;
width: 100%;
height: 100%;
background: linear-gradient(#FF9940, white);
font-weight: normal;
}
h1{
font-family: Raleway;
padding: 20px;
font-size: 53px;
text-shadow: 2px 2px 1px grey;
background-color: #1E2752;
text-align: center;
border: 5px solid black;
color: #FCFCFF;
margin-top: 10px;
}
li{
float: left;
padding-right: 30px;
}
li a{
display: block;
color: white;
text-decoration: none;
padding: 19px 16px;
border: 2px solid #ffffff;
right: -100px;
}
li a:hover{
color: #ffffff;
background: #FF9940;
transition: all 0.4s ease 0s;
}
ul{
transition: all 0.4s ease 0s;
list-style-type: none;
text-decoration: none;
font-size: 12px;
text-transform: uppercase;
color: #ffffff;
background: transparent;
display: inline-block;
position: absolute;
text-align: center;
padding: 0px;
top: 28px;
left: 23px;
right: 23px;
width: 100%;
}
h2{
text-align: center;
font-size: 25px;
}
h2 p{
font-size: 18px;
}
.right-button{
float: right;
padding-right: 47px
}
.other-button{
float: right;
padding-right: 30px;
}
body{
font-family: tahoma;
font-size: 15px;
line-height: 1.75;
padding: 0;
margin: 0;
}
#timeline{
margin-left: 470px;
height: 400px;
width: 500px;
display:flex;
background-color: #031625;
}
#timeline:hover .t1-item{
max-width: 400px;
max-height: 500px;
width:23.3333%;
}
.t1-item:before, .t1-item:after{
transform: translate3d(0,0,0);
content: ' ';
position: absolute;
left: 0;
top: 0;
}
.t1-item{
transform: translate3d(0,0,0);
position: relative;
width: 25%;
height: 100vh;
min-height: 600px;
color:white;
overflow: hidden;
transition: width 0.5s ease;
}
.t1-item:after{
background: rgba(3,22,37,0.85);
opacity: 1;
transition: opacity .5s ease;
}
.t1-item:before{
background: linear-gradient(to bottom,
rgba(0,0,0,0) 0%, rgba(0,0,0,1) 75%);
z-index: 1;
opacity: 0;
transform: translate3d(0,0,0) translateY(50%);
transition: opacity .5s ease,
transform .5s ease;
}
.t1-item:hover{
width: 30%;
}
.t1-item:hover:after{
opacity: 0;
}
.t1-item:hover:before{
opacity: 1;
transform: translate3d(0,0,0) translateY(0);
transition: opacity 1s ease, transform 1s ease
.25s;
}
.t1-item:hover .t1-content{
opacity: 1;
transform: translateY(0);
transition: all .75s ease .5s;
}
.t1-item:hover .t1-bg{
filter: grayscale(0);
}
.t1-content{
transform: translate3d(0,0,0) translateY(25px);
position: relative;
z-index: 1;
text-align: center;
margin: 0.1618em;
top: 55%;
opacity: 0%;
}
.t1-content h3{
font-family: tahoma;
text-transform: uppercase;
color: #1779cf;
font-size: 1.44rem;
font-weight: normal;
}
.t1-year{
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
border-top: 1px solid white;
border-bottom: 1px solid white;
}
.t1-year p{
font-family: tahoma;
font-size: 1.628rem;
line-height: 0;
}
.t1-bg{
transform: translate3d(0,0,0);
position: absolute;
top: 0;
left: 0;
background-size: cover;
background-position: center center;
transition: filter .5se ease;
filter: grayscale(100%);
}
<!DOCTYPE html>
<html lang = "en" >
<head>
<meta charset = "UTF-8">
<title> Isabelle Kreienbrink </title>
<link href="styles/style.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Raleway&display=swap" rel="stylesheet">
</head>
<body>
<h1> Header </h1>
<ul>
<li>Resume</li>
<li>Academics</li>
<li><a href="#projects" >Projects</a></li>
<li class="right-button">Contact Info</li>
<li class="other-button">Test</li>
<li class="other-button">Testing</li>
</ul>
<h2> Welcome to my website!
<p> I hope you learn a little about me while you're here. </p>
</h2>
<section id="timeline">
<div class="t1-item">
<div class="t1-bg" style="background-image:url(https://eng-dev.stanford.edu/sites/default/files/styles/full_width_banner_tall/public/chalkboard_web.jpg?itok=xqk3ef56)">
</div>
<div class="t1-year">
<p class="f2 heading">2014</p>
</div>
<div class="t1-content">
<h3>Lorem ipsum dolor </h3>
<p>
test
</p>
</div>
</div>
<div class="t1-item">
<div class="t1-bg" style="background-image:url(001.jpeg)"></div>
<div class="t1-year">
<p class="f2 heading">2015</p>
</div>
<div class="t1-content">
<h3>Lorem ipsum dolor </h3>
<p>
test
</p>
</div>
</div>
<div class="t1-item">
<div class="t1-bg" style="background-image:url(001.jpeg)"></div>
<div class="t1-year">
<p class="f2 heading">2016</p>
</div>
<div class="t1-content">
<h3>Lorem ipsum dolor </h3>
<p>
test
</p>
</div>
</div>
<div class="t1-item">
<div class="t1-bg" style="background-image:url(001.jpeg)"></div>
<div class="t1-year">
<p class="f2 heading">2015</p>
</div>
<div class="t1-content">
<h3>Lorem ipsum dolor </h3>
<p>
test
</p>
</div>
</div>
</section>
</body>
</html>
If i'm understanding your problem correctly, it's the .t1-item {height: 100vh;} that's giving you the issue, along with the min-height: 600px. That is pushing the .t1-item down in its pre-hover state, thus creating that space.
An alternative to using these height specifications would be to use margin-top to position your instances of .t1-item:
.t1-item {
transform: translate3d(0,0,0);
position: relative;
width: 25%;
color: white;
overflow: hidden;
transition: width 0.5s ease;
margin-top: 20rem;
}
I've been stumped fixing this HTML for the past week. My divs continue to overlap one another. After you refresh the page, it goes back to normal but sometimes when you land on it, the divs overlap. Please help me fix this bug that plagues my site. Any help would be amazing! If you have any further questions, please ask and I'll return your message promptly. Thanks :). Here's an example
.product {
width: calc((100% - 90px) / 4);
margin-bottom: 59px;
position: relative;
}
.product_image {
width: 100%;
}
.product_image img {
max-width: 100%;
}
.product_content {
width: 100%;
padding-top: 36px;
padding-bottom: 38px;
}
.product_title a {
font-size: 18px;
font-weight: 500;
color: #1b1b1b;
line-height: 1.1;
-webkit-transition: all 200ms ease;
-moz-transition: all 200ms ease;
-ms-transition: all 200ms ease;
-o-transition: all 200ms ease;
transition: all 200ms ease;
}
.product_price {
font-size: 16px;
font-weight: 500;
color: #6c6a74;
line-height: 0.75;
margin-top: 13px;
}
.product_extra {
position: absolute;
top: 0;
left: 54px;
width: 66px;
height: 36px;
text-align: center;
-webkit-transform-origin: top left;
-moz-transform-origin: top left;
-ms-transform-origin: top left;
-o-transform-origin: top left;
transform-origin: top left;
transform: rotate(90deg);
}
.product_extra a {
display: block;
font-size: 16px;
font-weight: 500;
color: #FFFFFF;
line-height: 36px;
}
<div class="row">
<div class="col">
<div class="product_grid">
<!-- Product -->
<div class="product">
<div class="product_image"><img src="Products/wave_pack/details_1.jpg" alt="Wave Pack"></div>
<div class="product_extra product_sale">Hot</div>
<div class="product_content">
<div class="product_title">Boho Wave Collection</div>
<div class="product_price">$8.99</div>
</div>
</div>
<!-- Product -->
<div class="product">
<div class="product_image"><img src="Products/SLH_collections/lovers/details_1.png" alt="Lover's Charm"></div>
<div class="product_extra product_hot">Hot</div>
<div class="product_content">
<div class="product_title">Lover's Charm Collection</div>
<div class="product_price">$8.99</div>
</div>
</div>
Add Css -
.product_grid {
display: flex;
align-items: center;
flex-wrap: wrap;
margin: 0 -20px;
}
.product {
width: calc(100%/4 - 40px);
margin-bottom: 59px;
position: relative;
margin: 0 20px;
}