I want to learn how to use css transition effects but I can't figure it out. I would like to add a transition effect like this one to my site http://themeforest.net/item/smiling-responsive-parallax-one-page-template/full_screen_preview/6185323 (check the portfolio section) but every time I try to add the fade transition effect it doesn't work. I don't know what I'm doing wrong. I have the markup ready but I can't get the transition effect to work. Can someone please help me figure this out?
This is the markup I have.
<div class="home-photo-gallery">
<div class="gallery-item-wrap">
<img src="http://realfood.tesco.com/media/images/juicehero-d2faf7ed-c433-4971-b1fc-b1ff7bf093fe-0-472x310.jpg" />
<div class="item-text">
<h4>Orange</h4>
</div>
</div>
.gallery-item-wrap {
position: relative;
}
.item-text h4 {
position: absolute;
top: 60px;
width: 100%;
color: white;
font-size: 50px;
text-align: center;
}
.item-text {
position: absolute;
width: 472px;
height: 310px;
background: rgba(0, 0, 0,0.8);
top: 0;
display: none;
}
.gallery-item-wrap:hover .item-text {
display: block;
transition: opacity 1s ease-in-out;
}
fiddle http://jsfiddle.net/XNgV8/
Thanks in advance I really appreciate it!
You can use CSS transitions for that. Here's an updated fiddle:
http://jsfiddle.net/myajouri/XNgV8/3/
.gallery-item-wrap {
position: relative;
}
.item-text h4 {
position: absolute;
top: 40px;
width: 100%;
color: white;
font-size: 50px;
text-align: center;
transition: all 0.5s;
}
.item-text {
position: absolute;
width: 472px;
height: 310px;
background: rgba(0, 0, 0,0.8);
top: 0;
opacity: 0;
transition: all 0.3s;
}
.gallery-item-wrap:hover .item-text {
opacity: 1;
}
.gallery-item-wrap:hover .item-text h4 {
top: 60px;
}
You need to work with opacityand easing in the right place. ;)
Check this updated fiddle: http://jsfiddle.net/XNgV8/1/
(I hope this is the effect you were going for.)
Related
I have a div called time-box. Sometimes I will also include an additional class called countdown. If countdown is added then I would like to use a CSS transition effect so the background changes to be red over the course of 60 seconds. In other words, each second that passes the red background gets a little wider until eventually all of the green background has gone.
I have found similar posts here but they all seem to relate to hover
Here is a fiddle
https://jsfiddle.net/e2vbheew/
I don't know a "simple" way to get what you want going from left to right, but there's a way you can create it using before and after pseudoelements. The key here is I'm going to create a :before pseudoelement that has the new background that transitions across, and an :after pseudoelement that replicates the content and puts it on top of the before, so it's still visible. This required putting the content in an attribute on the div so I could reference it in the 'content' of the pseudoelement. If you had more complex content inside, you could probably do away with the :after and simply give the internal content position and z-index to make sure it's visible. Here's the resulting CSS
.time-box {
height: 27px;
text-align: center;
background-color: #25E57B;
font-size:2rem;
padding:0px;
font-size:1.2rem;
text-transform:uppercase;
padding:3px 5px 3px 5px;;
font-weight:600;
height:auto;
position: relative;
}
.time-box:before {
background-color: red;
position: absolute;
left:0;
top: 0;
height: 100%;
width: 0;
content: " ";
transition: width 60s ease;
}
.countdown:after {
content: attr(data-content);
width: 100%;
text-align: center;
height: 100%;
position: absolute;
left: 0;
top: center;
z-index: 1;
}
.countdown:before {
width:100%;
}
And updated fiddle: https://jsfiddle.net/tunzwqd7/2/
Using CSS animation property...
.time-box {
height: 27px;
text-align: center;
background-color: #25E57B;
font-size: 2rem;
padding: 0px;
font-size: 1.2rem;
text-transform: uppercase;
padding: 3px 5px 3px 5px;
font-weight: 600;
height: auto;
position: relative;
z-index: 1;
}
.time-box.countdown:before {
content: '';
width: 0;
height: 100%;
display: block;
position: absolute;
top: 0;
left: 0;
background: red;
animation: countdown 60s forwards;
z-index: -1;
}
#keyframes countdown {
0% {
width: 0;
}
100% {
width: 100%;
}
}
<div class="time-box">
12:00
</div>
<div class="time-box countdown">
<span>12:00</span>
</div>
You would need to add a maximum and a little more math to make the 100% divisible by 60, but this should get you on the right track. Currently this code updates every second and adds 1% to the progress bar width with each iteration.
var time = 0;
var bar = document.querySelector('.countdown .progress-bar');
window.setInterval(function(){
time++;
bar.style.width = time+"%";
}, 1000);
.time-box {
height: 27px;
text-align: center;
background-color: #25E57B;
font-size:2rem;
padding:0px;
font-size:1.2rem;
text-transform:uppercase;
padding:3px 5px 3px 5px;;
font-weight:600;
height:auto;
position: relative;
}
.progress-bar {
display: none;
}
.countdown .progress-bar {
display: block;
position: absolute;
left: 0;
top: 0;
bottom: 0;
background: red;
width: 0%;
z-index: 1;
transition: all 0.3s ease-out;
}
.countdown p {
z-index: 2;
position: relative;
}
<div class="time-box">
<p>12:00</p>
<div class="progress-bar"></div>
</div>
<div class="time-box countdown">
<p>12:00</p>
<div class="progress-bar"></div>
</div>
I wanted to do a smooth transition of a fullscreen lightbox, my actual code is
<a href="#_" class="lightbox" id="img1">
<img src="images/photo.jpg">
</a>
And my style:
.lightbox {
display: none;
position: fixed;
z-index: 999;
width: 100%;
height: 100%;
text-align: center;
top: 0;
left: 0;
background: rgba(0,0,0,0.8);
}
.lightbox img {
max-width: 90%;
max-height: 80%;
margin-top: 2%;
}
.lightbox:target {
outline: none;
display: block;
transition:all 1s;
}
It's really simple, but transition:all seems to don't work with display block/none... Any idea?
display block/none does not allow any transition to run.
You must use visibility and opacity(for cross browser support).
So your code would look like this:
.lightbox {
display: block;
visibility: hidden;
opacity: 0;
position: fixed;
z-index: 999;
width: 100%;
height: 100%;
text-align: center;
top: 0;
left: 0;
background: rgba(0,0,0,0.8);
transition:all 1s;
}
.lightbox img {
max-width: 90%;
max-height: 80%;
margin-top: 2%;
}
.lightbox:target {
outline: none;
visibility: visible;
opacity: 1;
}
If I recall correctly, transition doesn't work with display. It's not time to give up hope, however! There's opacity! Use opacity: 0 and opacity: 1 in combination with display: none and display: block. Also, your transition is on the .lightbox:target, not the .lightbox. When it's on .lightbox:target, it's too late to start the transition.
Corrected CSS:
.lightbox {
display: none;
opacity: 1;
position: fixed;
z-index: 999;
width: 100%;
height: 100%;
text-align: center;
top: 0;
left: 0;
background: rgba(0,0,0,0.8);
transition: opacity 1s;
}
.lightbox img {
max-width: 90%;
max-height: 80%;
margin-top: 2%;
}
.lightbox:target {
outline: none;
display: block;
opacity: 1;
}
you can't transition display since it has no interim values, it is either displayed or hidden (of course there are many different ways of display)
It can't be 25% displayed
in order to create fade in transition with css only, you'll need to use the opacity attribute
function toggle(){
var element = document.getElementById("element");
if(element.className==""){
element.className = "out";
} else {
element.className = "";
}
}
#element{
transition: all 1s;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.5);
opacity: 1;
}
#element.out{
opacity:0
}
button{z-index: 2; position: relative}
<div id="element">Element</div>
<br />
<button onclick="toggle()">click to fade in/out</button>
EDIT: All sorted now. Thanks to everyone that helped! :)
I am having trouble centering an element of my website. It is 3 divs mixed together to form a hexagon.
I cannot center it.
HTML:
<li>
<div class="centerhex">
<a href="#">
<div class="hexa">
<div class="hexcontainer">
<div class="vertical-align">
<span class="hextext">Lorem Ipsum Dolor</span>
</div>
</div>
</div>
</a>
</div>
</li>
CSS:
.centerhex {
left: 50%;
margin: 0 auto;
width:210px;
height:300px;
}
.hexa {
width: 100%;
min-width: 200px;
height: 0;
padding-bottom: 57.7%;
margin-top: 65px;
background-color: #4a4a4a;
/*position: absolute;*/
color: #ffffff;
font-family: 'Oswald', sans-serif;
font-size: 18px;
border-radius: 4%/20%;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.hexa::before,
.hexa::after {
content:"";
display: block;
width: inherit;
height: inherit;
padding: inherit;
background: inherit;
z-index: 0;
position: absolute;
border-radius: inherit;
-moz-transform:rotate(60deg);
-webkit-transform:rotate(60deg);
-o-transform:rotate(60deg);
-ms-transform:rotate(60deg);
}
.hexa::after {
-moz-transform:rotate(-60deg);
-webkit-transform:rotate(-60deg);
-o-transform:rotate(-60deg);
-ms-transform:rotate(-60deg);
}
.hexcontainer {
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
z-index: 10;
}
.vertical-align {
display: table;
height: 100%;
width: 100%;
}
Also, I need help so the bottom of the shape isn't cut off.
URL: http://jackmarshallphotography.co.uk/V1/donate.html
There are few things to change in your css, I worked directly on your website with the chrome developer tool, please find below the css to center the "tag" :
.servicebox {
position: absolute;
margin-top: -77px;
width: 100%;
}
.servicebox ul {
list-style: none;
width: 100%;
text-align: center;
}
.servicebox ul li {
margin-left: 12px;
}
.centerhex {
margin: auto;
width: 210px;
height: 300px;
}
Hope it helps.
For the second issue :
you need to edit the file hexagon.css and change the margin-top property find the right value: -65px or more (line 47)
Yoann
Let me see if I can help you with a simple example.
Have a fiddle - fiddle link!
Edit! - Here is another fiddle without absolute positioning... seems like this can be achieved without it - fiddle link - no absolute positioning
Absolute positioning example:
HTML
<div id="parentOfCentered">
<div id="perfectlyCentered"></div>
</div>
CSS
#parentOfCentered {
position: relative; /* Absolutely positioned children will be positioned in relation to the parent div */
background: #CCC;
width: 400px;
height: 400px;
}
#perfectlyCentered {
width: 200px;
height: 200px;
background: #000;
position: absolute;
left: 50%;
top: 50%;
margin: -100px 0 0 -100px;
/*
- negative top margin of half the height
- negative left margin of half the width
*/
}
I have a DIV on top of another DIV.
What I want to achieve is hide the DIV on top to be able to access the DIV below.
I've tried opacity, but since the top DIV is still there, just transparent, It won't allow me to interact with the content of the DIV below.
I've also tried display:none;, visibility: hidden; and z-index. None of those would work.
How do I achieve this with CSS3, so I can also use a transition?
HTML:
<li class="panel-box">
<div class="front box-style"> </div>
<div class="back"> </div>
</div> </li>
CSS:
.panel-box {
margin: 5px;
padding: 0;
display: inline-block;
clear: none;
float: left;
width: 310px;
height: 200px;
position: relative;
}
.box-style {
background-color: red;
}
.front {
width: 310px;
height: 200px;
z-index: 5;
opacity: 0;
display: block;
position: absolute;
top: 0;
left: 0;
}
.front:hover {
opacity: 0;
display: none;
}
.back {
width: 310px;
height: 200px;
background-color: rgba(57, 54, 55, 0.95);
position: absolute;
top: 0;
left: 0;
z-index: 0;
}
Thanks a bunch.
I've put together a bit of a workaround that seems to do some of this, but it will likely fail miserably on IE.
Tested and works reasonably on Chrome… YMMV :)
It uses a combination of z-index and sibling selectors to allow the front/back divs to swap places in the stacking context.
I had to swap places with front/back to use the CSS sibling selectors. I don't claim this is a perfect example, but perhaps it'll get the ideas flowing.
Basically what is happening here is:
As the mouse enters - trigger .front:hover
front z-index goes to -1 triggering .back:hover
back z-index immediately goes to 100 keeping it on top of the stack
sibling selector back:hover + front keeps the front opacity at 0
When the mouse transitions out, this all reverses
The reverse transition is not very smooth - haven't quite figured out if that can be fixed yet.
Demo
CSS
.panel-box {
margin: 5px;
padding: 0;
display: inline-block;
clear: none;
float: left;
width: 310px;
height: 200px;
position: relative;
}
.front {
width: 310px;
height: 200px;
padding: 10px;
z-index: 5;
opacity: 1;
display: block;
position: absolute;
background-color: red;
top: 0;
left: 0;
-webkit-transition: opacity .5s ease;
}
.front:hover {
opacity: 0;
z-index: -1;
}
.back {
width: 310px;
height: 200px;
padding: 10px;
color: white;
background-color: rgba(57, 54, 55, 0.95);
position: absolute;
top: 0;
left: 0;
z-index: 0;
opacity: 0;
-webkit-transition: opacity .5s ease;
}
.back:hover + .front {
opacity: 0;
}
.back:hover {
z-index: 100;
opacity: 1;
}
HTML
<li class="panel-box">
<div class="back">content goes here</div>
<div class="front box-style"></div>
</li>
I have a test site here:
http://www.hugoproject.com/test.html
I'm trying to put a second row of the book icons beneath the first, but whatever I try doesn't work. The following code makes a single book icon appear:
<div class="project">
Arrow<span></span>
</div>
When I have two sets of the code, two icons appear, when there are three sets of the code three icons appear. But if I have four or more sets of the code still only three icons appear. I want for the extra sets of code to make icons beneath the first three.
Also at the moment when you resize the browser window this makes the icons resize dynamically. I'd like to keep this feature and make both rows of icons fit on the one page such that there is no scroll bar.
Any ideas?
HTML
<div id="content">
<div id="home-projects-wrapper">
<h1 class="home">Hello! My name is Brandon</h1>
<div id="home-projects">
<div id="projects" class="circle">
<div class="project-group">
<div class="project">
Arrow<span></span>
</div>
<div class="project">
Arrow<span></span>
</div>
<div class="project">
Arrow<span></span>
</div>
<div class="project">
Arrow<span></span>
</div>
</div>
</div>
</div>
</div>
</div>
CSS
#container {
transition: left .3s;
-moz-transition: left .3s;
-webkit-transition: left .3s;
position: absolute;
width: 100%;
height: 100%;
left: 0;
overflow-x: hidden;
}
#container.open {
left: 270px;
position: absolute;
width: 100%;
height: 100%;
transition: left .3s;
-moz-transition: left .3s;
-webkit-transition: left .3s;
overflow-x: hidden;
}
#content {
width: 80%;
max-width: 1170px;
margin: 7% auto;
position: relative;
font-size: 14px;
line-height: 22px;
color: #777777;
}
.page-template-page-templateshome-php #content {
width: auto;
margin: 0 auto;
position: static;
}
.single-post #content { width: 60% }
#home-projects {
text-align: center;
overflow: hidden;
position: relative;
}
#projects { width: 100% }
.project-group {
width: 100%;
height: 100%;
position: absolute;
}
.project {
float: left;
text-align: center;
width: 33.3%;
height: 100%;
}
.project-link {
background-size: cover;
background-repeat: no-repeat;
background-position: center;
background-color: #adadad;
position: relative;
overflow: hidden;
display: inline-block;
width: 80%;
}
.circle .project-link,
.circle .project-link .hover {
border-radius: 100%;
-moz-border-radius: 100%;
-webkit-border-radius: 100%;
}
.project-link .hexagon-top {
content: '';
display: block;
position: absolute;
left: 0;
border-style: solid;
border-bottom-color: transparent;
border-left-color: #dfdfdf;
border-right-color: #dfdfdf;
width: 0;
height: 0;
z-index: 2;
}
.project-link .hexagon-bottom {
content: '';
display: block;
position: absolute;
left: 0;
bottom: 0;
border-style: solid;
border-top-color: transparent;
border-left-color: #dfdfdf;
border-right-color: #dfdfdf;
width: 0;
height: 0;
z-index: 2;
}
.project-link .hover {
position: absolute;
width: 100%;
height: 100%;
font-size: 14px;
text-align: center;
color: #fff;
background: #ec6136;
text-decoration: none;
text-transform: uppercase;
display: block;
opacity: 0;
transition: all .3s;
-moz-transition: all .3s;
-webkit-transitin: all .3s;
}
.project-link .hover-text {
display: block;
margin-top: 45%;
}
.project-link .hover-text:after {
content: '>';
font-family: 'icon';
font-size: 12px;
margin-left: 15px;
}
.project-link:hover > .hover { opacity: .9 }
It looks like in your css (style.css) you have this :
.project-group{
width: 100%;
height: 100%;
position: absolute;
}
Just switch absolute by relative and your second row will appear. Is it enough for you?
.project-group{
width: 100%;
height: 100%;
position: relative;
}
I would recommend removing height: 100% from the .project and .project-group classes in your stylesheet. My guess is that setting a 100% height on an element is interacting poorly with the overflow: hidden statement from #home-projects.
First of all you have to double the height of #projects and set the height of .project to 50%.
What do you mean by:
Also at the moment when you resize the browser window this makes the icons resize dynamically. I'd like to keep this feature and make both rows of icons fit on the one page such that there is no scroll bar.