SO i am new to css actually i am a developer but i want to do this task with css only according to requirments . I have a div and i want to open a fixed div on click. i have tried some thing and setup on js fiddle here is js fiddle link . I am very near. main css part is
.portfolio
{
background: #218592;
z-index: 0;
opacity: 0;
-webkit-transform: translateX(0%);
-webkit-transition: -webkit-transform 0.5s ease-in-out, opacity 0s linear 0.5s;
-moz-transform: translateX(0%);
-moz-transition: -moz-transform 0.5s ease-in-out, opacity 0s linear 0.5s;
transform: translateX(0%);
transition: transform 0.5s ease-in-out, opacity 0s linear 0.5s;
-ms-transform: translateX(0%);
height: 100%;
width: 100%;
position: fixed;
top: 0;
left: 0;
}
.display-work
{
z-index: 1000;
opacity: 1;
-webkit-transform: translateX(-100%);
-moz-transform: translateX(-100%);
transform: translateX(-100%);
-ms-transform: translateX(-100%);
}
full code is available on JS fiddle
Problem
when i click on the div there is two issues
1) the div will not slide on first click (i can see this my self not a prior task)
2) the fixed div is sliding but it disappears immediately
unable to find the reason
You need to get rid of opacity:0 and switch translateX places.
portfolio{
background: #218592;
z-index: 0;
-webkit-transform: translateX(100%);
-webkit-transition: -webkit-transform 0.5s ease-in-out, opacity 0s linear 0.5s;
-moz-transform: translateX(100%);
-moz-transition: -moz-transform 0.5s ease-in-out, opacity 0s linear 0.5s;
transform: translateX(100%);
transition: transform 0.5s ease-in-out, opacity 0s linear 0.5s;
-ms-transform: translateX(100%);
height: 100%;
width: 100%;
position: fixed;
top: 0;
left: 0;
}
.display-work
{
z-index: 1000;
-webkit-transform: translateX(0%);
-moz-transform: translateX(0%);
transform: translateX(0%);
-ms-transform: translateX(0%);
}
Here is the fixed fiddle
Related
First I would like to explain what I want to achieve. I can't post picutes yet so I hope words will help. I have a pie with four sections.
And I want to link every of the sections with different links, and when hovering over a section, the pie should rotate. The degree of it's rotation depends on the section.
In my first attempt I tried it with imagemapping. Until I found out that they can't rotate.
After a long time of thinking I came up with this idea: Seperating my four parts, and bringing them together to a pie with four divs.
This worked and I was kinda proud, haha. Since I want the whole pie to rotate I tried this:
https://jsfiddle.net/canaika/dL569v6d/
When you hover over one of the sections a new image (the whole) pie appears, and it rotates. I wanted a smooth rotation, so I added a transition, but this ist where my problem started: yes the transition works, but it affects the come in of the image that appears, because the sections and the whole pie image have different sizes, and I can't change the sections side, otherwise the other sections are not accessible.
I hope this wasn't too confusing, maybe my idea or at least the way I tried to achieve it is dumb or impossible, but I wanted to give it a try.
#rotation1 {
background-image: url('http://www.imgbox.de/users/canaika/blue_navi.png');
height: 112px;
width: 112px;
position: fixed;
top: 100px;
left: 300px;
}
#rotation1:hover {
background-image: url('http://www.imgbox.de/users/canaika/navigation.png');
height: 224px;
width: 224px;
z-index: 1;
-webkit-transform: rotate(45deg), ;
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
-o-transition: all 0.5s linear;
-moz-transition: all 0.5s linear;
-khtml-transition: all 0.5s linear;
-webkit-transition: all 0.5s linear;
-ms-transition: all 0.5s linear;
transition: all 0.5s linear;
}
#rotation2 {
background-image: url('http://www.imgbox.de/users/canaika/pink_navi.png');
height: 112px;
width: 112px;
position: fixed;
top: 100px;
left: 412px;
}
#rotation2:hover {
background-image: url('http://www.imgbox.de/users/canaika/navigation.png');
height: 224px;
width: 224px;
position: fixed;
top: 100px;
left: 300px;
-webkit-transform: rotate(315deg);
-moz-transform: rotate(315deg);
-o-transform: rotate(315deg);
-ms-transform: rotate(315deg);
transform: rotate(315deg);
z-index: 1;
-o-transition: all 0.5s linear;
-moz-transition: all 0.5s linear;
-khtml-transition: all 0.5s linear;
-webkit-transition: all 0.5s linear;
-ms-transition: all 0.5s linear;
transition: all 0.5s linear;
}
#rotation3 {
background-image: url('http://www.imgbox.de/users/canaika/yellow_navi.png');
height: 112px;
width: 112px;
position: fixed;
top: 212px;
left: 300px;
}
#rotation3:hover {
background-image: url('http://www.imgbox.de/users/canaika/navigation.png');
height: 224px;
width: 224px;
position: fixed;
top: 100px;
left: 300px;
-webkit-transform: rotate(135deg);
-moz-transform: rotate(135deg);
-o-transform: rotate(135deg);
-ms-transform: rotate(135deg);
transform: rotate(135deg);
z-index: 1;
-o-transition: all 0.5s linear;
-moz-transition: all 0.5s linear;
-khtml-transition: all 0.5s linear;
-webkit-transition: all 0.5s linear;
-ms-transition: all 0.5s linear;
transition: all 0.5s linear;
}
#rotation4 {
background-image: url('http://www.imgbox.de/users/canaika/green_navi.png');
height: 112px;
width: 112px;
position: fixed;
top: 212px;
left: 412px;
}
#rotation4:hover {
background-image: url('http://www.imgbox.de/users/canaika/navigation.png');
height: 224px;
width: 224px;
position: fixed;
top: 100px;
left: 300px;
-webkit-transform: rotate(225deg);
-moz-transform: rotate(225deg);
-o-transform: rotate(225deg);
-ms-transform: rotate(225deg);
transform: rotate(225deg);
z-index: 1;
-o-transition: all 0.5s linear;
-moz-transition: all 0.5s linear;
-khtml-transition: all 0.5s linear;
-webkit-transition: all 0.5s linear;
-ms-transition: all 0.5s linear;
transition: all 0.5s linear;
}
#zeiger {
background-image: url('http://www.imgbox.de/users/canaika/zeiger.png');
height: 35px;
width: 9px;
position: fixed;
top: 100px;
left: 407px;
z-index: 2;
}
<div id="rotation1">link 1</div>
<div id="rotation2">link 2</div>
<div id="rotation3">link 3</div>
<div id="rotation4">link 4</div>
<div id="zeiger"></div>
You need to change your transition to work only on transform not all like this :
transition: transform 0.5s linear;
not
transition: all 0.5s linear;
https://jsfiddle.net/IA7medd/dL569v6d/2/
I'm making a hover effect on my website, where you hover images (pngs) and they grow in size. The problem i have is that they now get blurry when they resize.
The code that I'm using looks something like this:
.div {
-webkit-transition: -webkit-transform 0.35s;
transition: transform 0.35s;
-webkit-transform: perspective(1000px) translate3d(0,0,1px);
transform: perspective(1000px) translate3d(0,0,0);
}
.div:hover {
-webkit-transform: perspective(100px) translate3d(0,0,1px);
transform: perspective(100px) translate3d(0,0,31px);
}
And you can see the effect on this jsfiddle: enter link description here
Is there a way to fix this?
I think scale would be more appropriate for this. This solution only blurs during scaling.
.square {
width:100px;
height: 100px;
background-color:black;
margin: 50px;
}
p {
color:white;
text-align: center;
padding-top: 35px;
}
.square {
-webkit-transition: -moz-transform .3s ease-out;
-moz-transition: -webkit-transform .3s ease-out;
-o-transition: -o-transform .3s ease-out;
transition: transform .3s ease-out;
}
.square:hover {
-webkit-transform: scale(2);
-moz-transform: scale(2);
-o-transform: scale(2);
transform: scale(2);
}
<div class="square">
<p>Some text</p>
</div>
I am trying to get figcaption caption to appear fade in/animate on hover on the bottom. But i cannot get the figcaption div tag seems to disappear off the screen.
I want it so that when you hover over the banner, the figcaption appears regardless over where the mouse is hovering over.
i have 4 elements:
- the background image
- gradient overlay
- description
- figcaption
the current code i have is: http://jsfiddle.net/fGF8E/
DEMO
.figcaption {
z-index: 4;
position: absolute;
height: 50px;
width: 100%;
bottom: 0;
-webkit-transform: translateY(100%);
-moz-transform: translateY(100%);
-ms-transform: translateY(100%);
transform: translateY(100%);
-webkit-transition: -webkit-transform 0.4s, opacity 0.1s 0.3s;
-moz-transition: -moz-transform 0.4s, opacity 0.1s 0.3s;
transition: transform 0.4s, opacity 0.1s 0.3s;
}
.landing-cover:hover .figcaption{
opacity: 1;
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
-ms-transform: translateY(0px);
transform: translateY(0px);
-webkit-transition: -webkit-transform 0.4s, opacity 0.1s;
-moz-transition: -moz-transform 0.4s, opacity 0.1s;
transition: transform 0.4s, opacity 0.1s;
}
I am building a website and i am attempting to animate a :hover of a div so that when a mouse hovers over it another div that is currently at opacity:0 will increase its opacity to 0.8 over the span of 3.5 seconds while concurrently fading down into place.
This will work properly until the second time that i try it and then it will not fade back to 0 opacity when i leave the object with my mouse. The object will stay visible with opacity 0.8.
Hopefully i am making sense.
The fade animations are pulled from Animate.css and inserted directly into my css.
All of my code pertaining to this issue can be found here
.widget-Button4.widget-header.widget-html-widget.widget p
{
background:none;
height: 50px;
position: absolute;
top: 250px;
left: 1000px;
}
#Hosting
{
background-image: url("images/header_rollout_expandedbg.png");
background-size:100%;
background-repeat:no-repeat;
margin: 0 0 1em;
font-size: 11px;
line-height: 1.538em;
float: left;
padding: 20px 14px 14px 14px;
position: absolute;
top: 274px;
left: 909px;
z-index: 0;
-webkit-animation:fadeOutUp 3.5s; /* Chrome, Safari, Opera */
animation:fadeOutUp 3.5s;
-webkit-transition: opacity 3.5s ease-in-out;
-moz-transition: opactiy 3.5s ease-in-out;
-ms-transition: opacity 3.5s ease-in-out;
-o-transition: opacity 3.5s ease-in-out;
transition: opacity 3.5s ease-in-out;
filter: alpha(opacity=0);
opacity: 0;
}
#HostingButton
{
background-image: url("images/header_rolloutbg_static_complete.png");
background-size:100%;
background-repeat:no-repeat;
height: 20px;
width: 20px;
position: absolute;
top: 263px;
left: 1007px;
-webkit-transition: all 3.5s ease-in-out;
-moz-transition: all 3.5s ease-in-out;
-o-transition: all 3.5s ease-in-out;
-ms-transition: all 3.5s ease-in-out;
z-index: 50;
}
#HostingButton:hover
{
-webkit-transform: rotate(1080deg);
-moz-transform: rotate(1080deg);
-o-transform: rotate(1080deg);
-ms-transform: rotate(1080deg);
}
#HostingButton:hover + #Hosting
{
-webkit-animation:fadeInDown 3.5s; /* Chrome, Safari, Opera */
animation:fadeInDown 3.5s;
transition: none;
-o-transition: none;
-ms-transition: none;
-moz-transition: none;
-webkit-transition: none;
filter: alpha(opacity=80);
opacity: 0.8;
}
#-webkit-keyframes fadeInDown
{
0%
{
opacity: 0;
-webkit-transform: translateY(-20px);
-ms-transform: translateY(-20px);
transform: translateY(-20px);
}
100%
{
opacity: 1;
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}
}
#keyframes fadeInDown
{
0%
{
opacity: 0;
-webkit-transform: translateY(-20px);
-ms-transform: translateY(-20px);
transform: translateY(-20px);
}
100%
{
opacity: 1;
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}
}
#-webkit-keyframes fadeOutUp
{
0%
{
opacity: 1;
-webkit-transform: translateY(0);
transform: translateY(0);
}
100%
{
opacity: 0;
-webkit-transform: translateY(-20px);
transform: translateY(-20px);
}
}
#keyframes fadeOutUp
{
0%
{
opacity: 1;
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}
100%
{
opacity: 0;
-webkit-transform: translateY(-20px);
-ms-transform: translateY(-20px);
transform: translateY(-20px);
}
}
And the HTML to go along with it here
<p>
Hosting
</p>
<div id="HostingButton">
</div>
<div id="Hosting">
<div id="rollouttext">
Hello
</div>
</div>
I managed to get the opacity part of it that i am having trouble with working in JSFiddle.
http://jsfiddle.net/7uR8z/1499/
It is the same code that i am using however, i think i might have some conflict and i am having a hell of a time trying to figure it out.
Any help would be appreciated!
How you are describing it is where there are 2 divs. The first div is visible and the second div is 0 opacity. When you hover the first div is 0 opacity and the second div is 80% opacity. This happens over 3.5 seconds.
I made the 2 states in different divs .item and .description. Not too sure why you had zoom in there? Let me know if this is not what you're trying to do.
.container {
height:200px;
width:200px;
position:relative;
}
.item {
height:200px;
width:200px;
position:absolute;
background:red;
-webkit-transition: opacity 3.5s ease-in;
-moz-transition: opactiy 3.5s ease-in;
-ms-transition: opacity 3.5s ease-in;
-o-transition: opacity 3.5s ease-in;
transition: opacity 3.5s ease-in;
filter: alpha(opacity=100);
opacity: 1;
}
.item:hover {
filter: alpha(opacity=0);
opacity: 0;
}
.descriton {
position:absolute;
height:200px;
width:200px;
background:green;
display:visible;
-webkit-transition: opacity 3.5s ease-in;
-moz-transition: opactiy 3.5s ease-in;
-ms-transition: opacity 3.5s ease-in;
-o-transition: opacity 3.5s ease-in;
transition: opacity 3.5s ease-in;
filter: alpha(opacity=0);
opacity: 0;
}
.descriton:hover {
filter: alpha(opacity=80);
opacity: 0.8;
}
Check out the demo jsfiddle
Here is Demo 1 http://css3.bradshawenterprises.com/cfimg/
What I am trying to do is to add scale or rotate to this demo.
So it should be: when mouse over first img it will disappear and second img will appear and then will scale:
<div id="cf">
<img class="bottom" src="/images/Windows%20Logo.jpg" />
<img class="top" src="/images/Turtle.jpg" />
</div>
#cf {
position: relative;
height: 281px;
width: 450px;
margin: 0 auto;
}
#cf img {
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;
}
#cf img.bottom:hover {
-o-transform: scale(1.5);
-moz-transform: scale(1.5);
-webkit-transform: scale(1.5);
transform: scale(1.5);
transition: opacity 1s ease-in-out;
}
I dont know if it is posible to do or I have to use js. I would like to do with pure css.
Thank you for your time!
Try adding z-index,like this:-
#cf {
position: relative;
height: 281px;
width: 450px;
margin: 0 auto;
}
#cf img {
position: absolute;
left: 0;
z - index: 1;
width: 300px;
height: 400px;
- 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;
z - index: 0;
}
#cf img.bottom: hover {
z - index: 2;
- o - transform: scale(1.5);
- moz - transform: scale(1.5);
- webkit - transform: scale(1.5);
transform: scale(1.5);
transition: opacity 1s ease - in -out;
}