My codes are pretty simple yet I've failed to get how a transition works and how it doesn't work on my HTML right here:
<div id="footer">
<div id="footer1">
<p> This should be a footer </p>
</div>
</div>
and my CSS
#footer {
position: fixed;
bottom: 0;
background-color: black;
min-width: 100%;
font-family: Agency FB;
transition: width 3s;
}
#footer1 {
text-align: center;
color: #4e4e4e;
}
#footer:hover {
opacity: .8;
color: white;
height: 100px;
}
I don't see anything wrong with my code. That or I'm still inexperienced. Thanks!
Try this
#footer {
position: fixed;
bottom: 0;
background-color: black;
min-width: 100%;
font-family: Agency FB;
transition: height 3s;
height: 50px;
}
#footer1 {
text-align: center;
color: #4e4e4e;
}
#footer:hover {
opacity: .8;
color: white;
height: 100px;
}
If it doesn't work please tell me
#footer {
position: absolute;
bottom:0;
background-color: black;
min-width: 100%;
height:50px;
font-family: Agency FB;
transition: width 3s, height 1s, transform 1s;
}
#footer1 {
text-align: center;
color: #4e4e4e;
}
#footer:hover {
opacity: .8;
color: white;
height: 100px;
}
<div id="footer">
<div id="footer1">
<p> This should be a footer </p>
</div>
</div>
Just play around with the values of transition: width 3s, height 1s, transform 1s;
Cheers!
Related
#import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght#700&family=Reggae+One&display=swap');
html {
margin: 0;
padding: 0;
background-image: url(main.jpg);
width: 100%;
height: auto;
background-size: cover;
z-index: 100;
}
html::after {
content: "";
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
background-color: black;
opacity: .5;
z-index: -10;
}
/*Main text on the main page*/
.maintext {
display: block;
height: auto;
/* border: 2px solid red; */
padding: 0;
margin: 0;
}
.maintext h1 {
color: transparent;
display: inline-block;
position: relative;
font-family: 'Reggae One', cursive;
/* border: 2px solid red; */
margin-top: -10px;
animation: show .5s ease forwards;
animation-delay: 1s;
color: black;
}
.maintext h1 span {
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 0;
background-color: red;
animation: overlay 1s ease forwards;
animation-delay: .5s;
}
h1:nth-child(1) {
animation-delay: 1s;
}
h1:nth-child(2) {
animation-delay: 2s;
}
h1:nth-child(3) {
animation-delay: 3s;
}
h1:nth-child(1) span {
animation-delay: .5s;
}
h1:nth-child(2) span {
animation-delay: 1.5s;
}
h1:nth-child(3) span {
animation-delay: 2.5s;
}
.maintext .butt {
position: relative;
left: 900px;
top: 200px;
width: 250px;
height: 50px;
padding: 5px 30px;
border-radius: 8px;
background-color: transparent;
font-size: 25px;
font-weight: bolder;
font-family: 'Reggae One', cursive;
letter-spacing: 4px;
transition-duration: 2s;
transition-timing-function: ease;
color: white;
}
.maintext .butt:hover {
color: black;
box-shadow: 1px 1px 200px 200px rgba(92, 137, 204, .3);
background: transparent;
}
#keyframes overlay {
50% {
width: 100%;
left: 0;
}
100% {
left: 100%;
width: 0;
}
}
#keyframes show {
100% {
color: white;
}
}
<section class="hero">
<div class="maintext">
<h1>Hello, <span></span></h1><br>
<h1>My Name is <span></span></h1><br>
<h1>ABC XYZ <span></span></h1><br>
<button class="butt">Portfolio</button>
</div>
</section>
Output is: as in code but only scans one line at a time one after another.
I have been through the code several times, I did every h1 one by one, I cant see whats wrong. I have had a look at other posts as well but could not find the solution, I am sure I have typed correctly but for some reason its playing up.
You guidance would be greatly appreciated.
There you added <br> after every h1. So in css you can't get second h1 by :nth-child(2). You have need to change those by :nth-child(1) :nth-child(3) :nth-child(5)
#import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght#700&family=Reggae+One&display=swap');
html
{
margin:0;
padding:0;
background-image: url(main.jpg);
width: 100%;
height: auto;
background-size: cover;
z-index: 100;
}
html::after{
content:"";
position: absolute;
left:0;
top:0;
height: 100%;
width:100%;
background-color: black;
opacity: .5;
z-index: -10;
}
/*Main text on the main page*/
.maintext
{
display:block;
height:auto;
/* border: 2px solid red; */
padding:0;
margin:0;
}
.maintext h1{
color:transparent;
display:inline-block;
position: relative;
font-family: 'Reggae One', cursive;
/* border: 2px solid red; */
margin-top: -10px;
animation: show .5s ease forwards;
animation-delay: 1s;
color:black;
}
.maintext h1 span{
position: absolute;
left:0;
top:0;
height: 100%;
width: 0;
background-color: red;
animation: overlay 1s ease forwards;
animation-delay: .5s;
}
h1:nth-child(1){
animation-delay:1s;
}
h1:nth-child(3){
animation-delay:2s;
}
h1:nth-child(5){
animation-delay:3s;
}
h1:nth-child(1) span{
animation-delay:.5s;
}
h1:nth-child(3) span{
animation-delay: 1.5s;
}
h1:nth-child(5) span{
animation-delay: 2.5s;
}
.maintext .butt{
position: relative;
left: 900px;
top: 200px;
width: 250px;
height: 50px;
padding :5px 30px;
border-radius: 8px;
background-color: transparent;
font-size: 25px;
font-weight: bolder;
font-family: 'Reggae One', cursive;
letter-spacing: 4px;
transition-duration: 2s;
transition-timing-function:ease;
color:white;
}
.maintext .butt:hover
{
color: black;
box-shadow: 1px 1px 200px 200px rgba(92,137,204,.3);
background: transparent;
}
#keyframes overlay {
50%{
width: 100%;
left: 0;
}
100%{
left:100%;
width:0;
}
}
#keyframes show{
100%{
color:white;
}
}
<!DOCTYPE html>
<html>
<head>
<title>My Portfolio</title>
<link rel="stylesheet" href="portfolio.css">
</head>
<body>
<section class="hero">
<!-- <div class="menu">
<ul>
<li>About Me</li>
<li>Work Experience</li>
<li>Hobbies</li>
<li>Gallery</samp></li>
</ul>
</div> -->
<div class="maintext">
<h1>Hello, <span></span></h1><br>
<h1>My Name is <span></span></h1><br>
<h1>ABC XYZ <span></span></h1><br>
<button class="butt">Portfolio</button>
</div>
</section>
</body>
</html>
I have some videos with a background overlay and text over them and my goal is having this overlay and the text disappearing on hover. I've managed to achieve this but if I change the width of the div containing the text (class .project-content on code below), I get a funny transparency behaviour on hover.
Would anyone be able to help by letting me know how I can modify the width of said div while keeping the intended behavior on hover? Thank you very much!
Here's my code:
HTML
<div class="works-content">
<div class="video-background">
<a href="#" target="_bank">
<div class="video">
<video loop="" muted="muted" poster="" playsinline=""><source src="http://techslides.com/demos/sample-videos/small.mp4" type="video/mp4"></video>
</div>
</a>
<div class="project-content">
<p class="project-title">TITLE</p>
<p class="project-description">PROJECT DESCRIPTION</p>
</div>
</div>
</div>
CSS
.works-content {
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 60px 30px;
padding: 0px 30px 100px 30px;
}
.video-background {
background: $black;
position:relative;
transition: 0.5s ease;
width: 100%;
}
.video-background:hover {
transform: scale(1.04);
transition: 0.5s ease;
background: white;
}
.video-background:hover .project-title a, .project-description a {
display: none;
}
.video {
transition: 0.5s ease;
opacity: 0.2;
}
.video:hover {
transition: 0.5s ease;
opacity: 1;
}
video {
width: 100%;
}
.project-content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}
.project-content a {
color: white;
}
.project-title a {
font-size: 36px;
letter-spacing: 2px;
font-weight: bold;
border-bottom: 10px solid $yellow;
}
.project-title a:hover {
text-decoration: none;
}
.project-description {
font-size: 36px;
padding-top: 8px;
letter-spacing: 1px;
}
JS
jQuery('.video-background').mouseover(function(){
$('video', this).get(0).play();
}).mouseout(function(){
$('video', this).get(0).pause();
});
I have this HTML:
.orderData_button {
background-color: #FF5733;
border: none;
color: white;
padding: 5px 60px;
text-align: center;
display: inline-block;
font-size: 16px;
transition: width 1s ease-in-out
}
.slideDown_orderData {
display: none;
position: relative;
z-index: 3;
transition: width 1s ease-in-out
}
.orderData_button:hover .slideDown_orderData {
display: block;
width: 100%;
}
.orderData_button:hover {
width: 50%;
}
#orderData_2 {
font-size: 20px;
text-align: center;
}
<div class="orderData_button">
<p>Your Orders</p>
<p></p>
<div class="slideDown_orderData">
<p id="orderData_2"></p>
</div>
</div>
My orderData_button and slideDown_orderData will not transition width, but will change instantly. Why is this? (Yes I have look all over google, with no success)
-CSS noob
Here you can see my issue. I assume it has to do with the block and inline-block. I want to cleanly make the text appear when hovering over the area. Preferably all in CSS. If anyone can point me in the right direction, that'd be amazing. Thank you!
HTML
<div class="contact-icon icongrow" id="github">
<span class="fa fa-github icon"></span>
<span class="contact-icon-text">#username</span>
</div>
CSS
#github {
border-radius: 15px 10px;
padding: 8px 5px 5px 8px;
background: #000000;
color: #FFFFFF;
}
.icon {
float:none;
}
.icongrow {
font-size:24px;
width: 24px;
transition:width 1s;
display: block;
}
.icongrow:hover {
font-size: 28px;
width: 300px;
}
.icongrow:hover .contact-icon-text {
display: inline-block;
}
.contact-icon-text {
display: none;
}
https://jsfiddle.net/sfpfka64/
Add white-space: nowrap to .icongrow
.icongrow {
font-size:24px;
width: 24px;
transition:width 1s;
display: block;
white-space: nowrap;
}
and add an opacity transition to contact-icon-text :
.icongrow:hover .contact-icon-text {
opacity: 1;
}
.contact-icon-text {
opacity: 0;
display:inline-block;
transition: all 0.5s;
}
Also make the font-size on hover same as the initial font-size to provide more smoothness :
.icongrow:hover {
font-size: 24px;
width: 300px;
}
Snippet
#github {
border-radius: 15px 10px;
padding: 8px 5px 5px 8px;
background: #000000;
color: #FFFFFF;
}
.icon {
float:none;
}
.icongrow {
font-size:24px;
width: 24px;
transition:width 1s;
display: block;
white-space: nowrap;
}
.icongrow:hover {
font-size: 24px;
width: 300px;
}
.icongrow:hover .contact-icon-text {
opacity: 1;
}
.contact-icon-text {
opacity: 0;
display:inline-block;
transition: all 0.5s;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="contact-icon-container">
<div class="contact-icon icongrow" id="github">
<span class="fa fa-github icon"></span>
<span class="contact-icon-text">#username</span>
</div>
</div>
Just add the following rules to the .icongrow
white-space: nowrap;
overflow: hidden;
Working fiddle: https://jsfiddle.net/yvqga0ja/
An easy way would be to put your "contact-icon-text" as a position absolute, so that he would always be placed at the right place.
Demo
.contact-icon-container{
position:relative;
}
.contact-icon-text {
position: absolute;
top: 50%;
transform: translateY(-50%);
right: 10px;
opacity: 0;
}
.icongrow:hover .contact-icon-text {
opacity: 1;
transition: .3s ease-in;
You can add transition-delay in order to make your text appear a bit later, but you get the way I would do it :)
Can anyone help me please? I don't know how to use animate.css.
.original,
.box {
border-radius: 6px;
}
.original {
background: #eaeaed;
border: 1px dashed #cecfd5;
float: left;
margin: 12px 15px;
}
.box {
background: #2db34a;
height: 95px;
line-height: 95px;
text-align: center;
width: 95px;
}
.spin {
cursor: pointer;
transform-style: preserve-3d;
}
.spin:hover {
animation-name: slideDown;
-webkit-animation-name: slideDown;
animation-duration: 1s;
-webkit-animation-duration: 1s;
animation-timing-function: ease;
-webkit-animation-timing-function: ease;
visibility: visible !important;
}
<div class="original">
<div class="spin">
<div class="box box-1">Box 1</div>
</div>
</div>
I dont think that CSS have the property "slideDown".
But you can make somthing like this with CSS trnasition
http://jsbin.com/hiboyoxoha/1/edit
.wrapper {
width: 200px;
height: 100px;
background: #44f;
text-align: center;
color: #fff;
line-height: 100px;
font: 25px arial;
overflow: hidden;
position: relative;
}
.inner {
position: absolute;
height: 100px;
top: -100px;
transition: all 0.5s;
background: #444;
}
.wrapper:hover .inner {
top: 0px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<div class="wrapper">hover me
<div class="inner">Hello i am new div</div>
</div>
</body>
</html>