I have a container that holds image holder and text holder.
I can set it so that on hover the image scales and the same for the text.
YET when I try so set the image holder hover to scale the image and a secondary action to scale the text, hover just doesnt do the animation .
<div class="container">
<div class="imageholder"><img></div>
<div class="textholder"><text></div>
</div>
CSS
.imageholder:hover .textholder{
transform: translatey(100%);
transform: scale(1.1);
transition: .5s ease;
}
heii, you can change your code like this :
.imageholder:hover, .textholder:hover{
transform: translatey(100%);
transform: scale(1.1);
transition: .5s ease;
}
<div class="container">
<div class="imageholder">this is image</div>
<br/>
<div class="textholder">this is a text</div>
</div>
You need to add coma in your css like this:
.imageholder:hover, .textholder:hover{
transform: translatey(100%);
transform: scale(1.1);
transition: .5s ease;
}
Related
I am trying to create animation using pure CSS.
Here is my html structure
<div class="portfolio-item col-xs-12 col-sm-4 col-md-3" data-groups='["all", "identety", "interface"]'>
<div class="portfolio-bg">
<div class="portfolio">
<div class="tt-overlay"></div>
<div class="links">
<a class="image-link" href="images/works/portfolio-1.jpg"><i class="fa fa-search-plus"></i></a>
<i class="fa fa-link"></i>
</div><!-- /.links -->
<img class="portfolio-image" src="images/works/portfolio-1.jpg" alt="image">
<div class="portfolio-info">
<h3>Portfolio Title</h3>
</div><!-- /.portfolio-info -->
</div><!-- /.portfolio -->
</div><!-- /.portfolio-bg -->
</div><!-- /.portfolio-item -->
And my CSS styles
#imageHoverRotationAngle : 10deg;
#imageHoverScaleValue : 1.5;
#imageHoverAnimationTime : 0.5s;
.portfolio:hover .tt-overlay,
.portfolio:hover .links {
opacity: 1;
-webkit-transform: translate(0,0);
-moz-transform: translate(0,0);
-ms-transform: translate(0,0);
-o-transform: translate(0,0);
transform: translate(0,0);
}
.portfolio:hover .portfolio-image {
-webkit-transform:rotate(#imageHoverRotationAngle) scale(#imageHoverScaleValue);
-moz-transform:rotate(#imageHoverRotationAngle) scale(#imageHoverScaleValue);
-ms-transform:rotate(#imageHoverRotationAngle) scale(#imageHoverScaleValue);
-o-transform:rotate(#imageHoverRotationAngle) scale(#imageHoverScaleValue);
transform:rotate(#imageHoverRotationAngle) scale(#imageHoverScaleValue);
}
.portfolio .portfolio-image {
-webkit-transition:all #imageHoverAnimationTime ease-out;
-moz-transition:all #imageHoverAnimationTime ease-out;
-ms-transition:all #imageHoverAnimationTime ease-out;
-o-transition:all #imageHoverAnimationTime ease-out;
transition:all #imageHoverAnimationTime ease-out;
}
I cannot get it working.
In this case only portfolio-image is being animated, if css animation styles for portfolio-image than tt-overlay and links will work.
Is it possible to achieve both animations tt-overlay,links and portfolio-image at the same time ?
You haven't set initial opacity for your elements and every animated element should have transition property. + your example is a little bit empty without values.
Here is a plunker. I've added some values, so you can see changes. It's in Sass, but no a big difference.
.portfolio .tt-overlay, .portfolio .links { opacity: 0; }
https://plnkr.co/edit/ll29vpEkifg68W0yvaal?p=preview
I have following class in CSS file :
.grid-container-columns:hover .column-container-wrap, .grid-container-columns.active .column-container-wrap {
height: 400px;
-webkit-transition: height 0s;
-moz-transition: height 0s;
-o-transition: height 0s;
transition: height 0s; }
/* line 369, ../scss/_general.scss */
.grid-container-columns:hover .column-container, .grid-container-columns.active .column-container {
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
transform: translateY(0); }
and following HTML
<div id="divColumns" class="grid-container-columns">
<div class="column-btn">
<span class="fa fa-th-list"></span> Kolommen
</div>
<div class="column-container-wrap">
<div class="column-container"></div>
</div>
</div>
When I hover in the above div(having id="divColumns"), content of the div displays. I want to deactivate the hover effect and don't want to display the content but don't want to remove CSS class because its used in other pages..
I have tried following in my HTML page:
$(".grid-container-columns").hover(function (event)
{
event.preventDefault();
})
But it doesn't working. How can i stop displaying content of div in hover effect??
Just exclude that div using its id in your class. This can be done by the CSS negation selector :not().
Instead of:
.grid-container-columns:hover { ...
Do this:
.grid-container-columns:not(#divColumns):hover { ...
Demo Fiddle: http://jsfiddle.net/abhitalks/ujjamg9y/
Notice in the demo that the first div doesn't respond to hover, but the second one does.
I am trying to scale an element in CSS3. This element has child elements which jump around when the animation is done. This seems to occur only in Firefox. I've been trying a lot of fixes found here on SO, but none of them seem to do the job.
My HTML setup:
<div>
<ul>
<li class="appcenter-menu-item focus">
<a href="#/sp">
<div class="icon"></div>
<label>First item</label>
</a>
</li>
<li class="appcenter-menu-item focus">
<a href="#/pep">
<div class="icon"></div>
<label>Second item</label>
</a>
</li>
<li class="appcenter-menu-item focus">
<a href="#/hp">
<div class="icon"></div>
<label>Third Item</label>
</a>
</li>
</ul>
</div>
The transition on hover:
.focus {
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.focus:hover {
-webkit-transform: translate3d(0,0,0);
-moz-transform: translate3d(0,0,0);
-o-transform: translate3d(0,0,0);
-ms-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
transform: scale(1.1);
}
I have created a jsfiddle which shows the complete setup:
http://jsfiddle.net/kwhq2z4t/3/
Update
I am Using FireFox version 32.0.1, on Windows 7 x64.
Just experienced this "jump-after-transition-finished" bug in firefox.
After some fiddling around, adding -moz-transform-style: preserve-3d; to the animated elements' parent container - adding it to the initial state (the unanimated state before transition has occured - so that'd be just the .focus class) - did the job for me.
The only thing I've managed to find to fix things like this is:
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden;
It doesn't seem to help out with text in Firefox and Safari during scaling though, jumpy text is the browser rendering the size.
I have two images:one is supposed to be like a border and it would rotate on hover,the other one is supposed to be inside the first image that rotates.How can i put the second image inside the first?Here is my code and jsfiddle...
<div class="col-xs-4" style="text-align:center;margin-top:20px;background:black;">
<img class="img-responsive rotate" src="http://s21.postimg.org/s70s6ioyb/Okvir_rotirajuci.png" style="display:inline-block;"/>
<img class="img-responsive" src="http://s23.postimg.org/d0uos0jvb/E_mail.png" style="display:inline-block;"/>
</div>
My css...
.rotate{
-moz-transition: all 0.6s ease-in-out;
-webkit-transition: all 0.6s ease-in-out;
-o-transition: all 0.6s ease-in-out;
-ms-transition: all 0.6s ease-in-out;
transition: all 0.6s ease-in-out;
}
.rotate:hover {
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
JSFIDDLE
I had to use a couple of nested elements to achieve all three goals:
Spinning border and envelope icon overlap and align together.
Image pair is centered horizontally.
Image pair size is responsive.
Explanation
The element div.image_wrap is a centered child of div.container that provides a container for both images. It's width is 100% of div.container, but no more than 42px (the width of your images).
The element div.image_height_prop gives div.image_wrap (and therefore div.container) height. Since the images inside are positioned absolutely (so that they overlap), they have no height and will not prop open their container. div.image_height_prop has padding-top set to 100% of its parents width, essentially making a responsive square strut.
The images are positioned absolutely on top of one another, with the "border" last in the DOM so that it will be on top of the stacking order (for hover).
HTML
<div class="col-xs-4 container">
<div class="image_wrap">
<div class="image_height_prop">
<img class="icon" src="http://s23.postimg.org/d0uos0jvb/E_mail.png" />
<img class="rotate" src="http://s27.postimg.org/x4d8qxe73/square.png" />
</div>
</div>
</div>
CSS
div.container {
text-align:center;
background:black;
margin-top:20px;
}
div.image_wrap {
display:inline-block;
max-width:42px;
width:100%;
}
div.image_height_prop {
position:relative;
width:100%;
padding-top:100%;
height:0;
}
div.image_wrap img {
position:absolute;
top:0;
left:0;
width:100%;
}
img.rotate {
-moz-transition: all 0.6s ease-in-out;
-webkit-transition: all 0.6s ease-in-out;
-o-transition: all 0.6s ease-in-out;
-ms-transition: all 0.6s ease-in-out;
transition: all 0.6s ease-in-out;
}
img.rotate:hover {
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
Working Example
As mentioned by #chiliNUT, the box in the "border" image is off-center. I centered the image and and re-uploaded it. As an alternative, you could add a 1px left margin to the "envelope" image to adjust for the box being off-center.
img.rotate {
margin-left:1px;
}
An example of that
This will do it:
Wrap the images in an inline-block div.
Remove the inline-block style from both images.
Make the first image position:absolute, which will impose it onto the second image.
Leave the second image's style alone, the img element defaults to display:inline which is what we want.
See my update to your fiddle
http://jsfiddle.net/T8Pjh/17/
<div class="col-xs-4" style="text-align:center;margin-top:20px;background:black;position:relative;">
<div style=display:inline-block;>
<img class="img-responsive rotate" src="http://s21.postimg.org/s70s6ioyb/Okvir_rotirajuci.png" style="position:absolute;" />
<img class="img-responsive" src="http://s23.postimg.org/d0uos0jvb/E_mail.png" />
</div>
</div>
Follow up on this topic
When I apply css transform to parent element, child element is not fixed anymore.
http://jsfiddle.net/z8fBD/7/
have tried using only one direction transform but no success.
when you remove transform: translate(0%,0px); everything works just fine, but as you will understand from previous topic, I need this for my animation
Do you mean the move 'button' should stay put? If so, you need to apply the transform to the container element since the body (you should consider renaming this div) will transform all its children. Here are the changes to do that:
JS:
jQuery(document).ready(function($){
$('#move').click(function(){
if(!$('#container').hasClass('move')){
$('#container').addClass('move');
} else {
$('#container').removeClass('move');
}
})
})
CSS:
#body {
position:absolute;
left: 0;
top:0;
width: 200px;
}
#container {
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
-webkit-transform: translate(0%,0px);
-moz-transform: translate(0%,0px);
-ms-transform: translate(0%,0px);
-o-transform: translate(0%,0px);
transform: translate(0%,0px);
}
#container.move {
-webkit-transform: translate(150%,0px);
-moz-transform: translate(150%,0px);
-ms-transform: translate(150%,0px);
-o-transform: translate(150%,0px);
transform: translate(150%,0px);
The rest of the CSS stays the same. Note how styles that were on the body were moved to #container.