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;
}
Related
In these three cases, is there a way to write in CSS?
In normal mode
In hover mode
Out of hover
.tab:hover:nth-of-type(1) ~ .tab__content:nth-of-type(1) {
opacity: 1;
transition: 0.5s opacity ease-in, 0.8s -webkit-transform ease;
transition: 0.5s opacity ease-in, 0.8s transform ease;
transition: 0.5s opacity ease-in, 0.8s transform ease, 0.8s -webkit-transform ease;
position: relative;
top: 0;
z-index: 100;
-webkit-transform: translateY(0px);
transform: translateY(0px);
text-shadow: 0 0 0;
}
enter image description here
js
There's only :hover in CSS but in Javascript you have mouseover and mouseout if that's of any use?
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>
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
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
My problem is about choosing in CSS first or second image.
<div class="ao-preview">
<input type="checkbox" id="ao-toggle" class="ao-toggle" name="ao-toggle" />
<img src="img/local.png"/>
<img src="img/local_big.jpg"/>
</div>
CSS code
.ao-item img {
margin: 0 auto;
max-width: 100%;
display: block;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
filter: alpha(opacity=80);
opacity: 0.8;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
input.ao-toggle:checked +img{
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=99)";
filter: alpha(opacity=99);
opacity: 1;
-webkit-transform: scale(0);
-moz-transform: scale(0);
-o-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
}
input.ao-toggle:checked +img sets attributes for first image.
So the question is, how can I choose second image in that case? Because I want to make by one click one image disappear and another appear instead of first.
A more generic approach could be the use of nth-of-type pseudo class
.ao-toggle:checked + img:nth-of-type(1) {
//style for the 1st element here
}
.ao-toggle:checked + img:nth-of-type(2) {
//style for the 2nd element here
}
foo + img + img would be the image after the image after foo.