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
Related
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;
}
I'm having odd behavior where circular pictures are changing to square on desktop and mobile. This only seems to be happening on safari, and it only happens when I add a CSS transition. Here's the website:
https://shmoss.github.io/Gibbs-Lab/people.html
If you view on mobile and click on a photo, it will change to a square. Here's the code:
<div class="py-5 text-center text-info background-info" style="">
<div class="container" id="people-container">
<div id="parent" class="row">
<!-- Lead Scientists -->
<div class="col-6 col-md-3 p-4 holly-gibbs lead-scientist">
<div class="img-holder">
<a style='color:none'href="holly-gibbs.html"><img class="img-fluid d-block mx-auto" src="bio_img/holly_gibbs_bio_new.png" alt="Card image cap" width="200">
</a>
</div>
<div class="bio-holder">
<a style='color:none'href="holly-gibbs.html">
<h4 class="people_name"> <b>Holly Gibbs</b> </h4>
<p class="mb-0">PROFESSOR AND DIRECTOR OF GLUE LAB</p>
</a>
</div>
</div>
<div class="col-6 col-md-3 p-4 lead-scientist">
<div class="img-holder">
<a style='color:none'href="tyler-lark.html"><img class="img-fluid d-block mx-auto " src="bio_img/tyler_lark_bio.png" alt="Card image cap" width="200">
</a>
</div>
<div class="bio-holder">
<a style='color:none'href="tyler-lark.html">
<h4 class="people_name"> <b>Tyler Lark</b> </h4>
<p class="mb-0">LEAD SCIENTIST</p>
</a>
</div>
</div>
</div>
</div>
/* ------------------------------People Page ------------------------------*/
/* container for people photos */
#people-container {
padding-top:10px;
}
/* Bio photo */
.img-holder {
max-width: 200px;
max-height: 200px;
overflow: hidden !important;
margin:0 auto
}
/* Bio info container (name, title) */
.bio-holder {
padding-top:10px;
}
/* Bio title */
.mb-0 {
color:#004869 !important;
font-size:14px;
font-weight:500 !important;
text-transform: uppercase
}
/* Bio image container */
.img-holder {
box-shadow: 0px 3px 15px rgba(0,0,0,0.2);
border-radius:50%
}
/* Scaling bio image on hover */
/* THIS CAUSES THE ISSUE! */
.img-fluid.d-block.mx-auto:hover {
-webkit-transform: scale(1.1);
-webkit-transition: all 0.125s ease-in-out 0s;
-moz-transition: all 0.125s ease-in-out 0s;
-ms-transition: all 0.125s ease-in-out 0s;
-o-transition: all 0.125s ease-in-out 0s;
transition: all 0.125s ease-in-out 0s;
}
.img-fluid.d-block.mb-3.mx-auto:focus {
-webkit-transform: scale(1.1);
-webkit-transition: all 0.125s ease-in-out 0s;
-moz-transition: all 0.125s ease-in-out 0s;
-ms-transition: all 0.125s ease-in-out 0s;
-o-transition: all 0.125s ease-in-out 0s;
transition: all 0.125s ease-in-out 0s;
}
I can't seem to figure out what's going on, maybe conflicting CSS somewhere?
I can reproduce, here is a minimal example, (please next time try to make yours as minimal)
.round {
width: 200px;
height: 200px;
overflow: hidden;
border-radius: 50%;
}
.inner {
transition: all 1s;
background: radial-gradient(red, green);
height: 100%;
cursor: pointer;
}
.inner:hover {
transform: scale(2);
}
<div class=round >
<div class=inner ></div>
</div>
This is a Safari bug, your code is fine [should work], and you should report the issue at https://bugs.webkit.org/.
The problem seems to affect only the software rendering, if we force using the GPU rendering, e.g by applying a 0px translateZ on the container, it works as expected:
.round {
width: 200px;
height: 200px;
overflow: hidden;
border-radius: 50%;
transform: translateZ(0px); /* force GPU rendering */
}
.inner {
transition: all 1s;
background: radial-gradient(red, green);
height: 100%;
cursor: pointer;
}
.inner:hover {
transform: scale(2);
}
<div class=round >
<div class=inner ></div>
</div>
So in your code you'd add this on the .img-holder rule.
However note that you probably don't need the prefixes for these properties anymore, and that even if you do need them, you should always add the unprefixed ones too, at the end. Currently your code only has -webkit-transform set, not the unprefixed one. This particular case works, but on some property you'll get different behaviors when the prefixed version is being chosen over the unprefixed one.
I think you need to clear your cache cos I can't notice it here
Tried on a OnePlus with both Chrome and Mozilla, it seems exactly like on desktop.
CSS has a habit of bugging out, try to clear cache line Nasiru stated or try a different browser just for testing
I'm searching a way to make an css effect but with exception of not applying the effect to the letters and the buttons (Only to the image), so I need create a rule in css. I can't change the order of the things.
With my code, I get something like this.
This is my code, like you can see I applied some effect in css and this is getting applied to all. I only need it for the image.
.myimage01 {
-webkit-transform: scale(1);
transform: scale(1);
-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out;
}
.myimage01:hover {
-webkit-transform: scale(1.3);
transform: scale(1.3);
}
<li id="armonioso-text-2" class="widget widget_armonioso_text">
<div class="armonioso-textwidget-wrapper armonioso-textwidget-no-paddings">
<!-- Here I'm currently Applying the efect -->
<div class="armonioso-textwidget myimage01" data-style="background-image: url(http:www.myurl.com/image.jpg);padding: 40px 30px ;color: #ffffff;text-align: center;">
<h5>hello world</h5>
<h3>Here how works</h3>
<p>Take a look of new things
<p><a class="btn alt" href="about/index.html" target="_self">About me</a>
</div>
</div>
<!-- Here I'm currently Applying the efect -->
</li>
When I apply the effect apply the effect to the letters (h5, h3, p and the button with btn class)
I don't want the effect for them, only for the background-image.
How can I do?
for transition backgrounds use the property background-size, and use background-position to adjust as fits you better
body {
margin: 0
}
.myimage01 {
background-size: 100%;
background-position:center center;
-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out;
background-image: url(http://lorempixel.com/1600/900);
padding: 40px 30px;
color: #ffffff;
text-align: center;
}
.myimage01:hover {
background-size: 130%;
}
<li id="armonioso-text-2" class="widget widget_armonioso_text">
<div class="armonioso-textwidget-wrapper armonioso-textwidget-no-paddings">
<!-- Here I'm currently Applying the efect -->
<div class="armonioso-textwidget myimage01">
<h5>hello world</h5>
<h3>Here how works</h3>
<p>Take a look of new things
<p><a class="btn alt" href="about/index.html" target="_self">About me</a>
</div>
</div>
<!-- Here I'm currently Applying the efect -->
</li>
Use background-size for transition:
div {
background-image: url(http://lorempixel.com/400/200/sports/1/);
background-size: 100%;
background-repeat:no-repeat;
background-position:50% 50%;
width:400px;
height:200px;
transition: background-size 200ms linear;
text-align:center;
line-height:200px;
}
div:hover {
background-size: 120%;
}
<div>
Some text
</div>
try to transform the background-size property instead of scaling the whole container.
You can apply transform on background-size, background-position to get the effect on the background image.
.myimage01 {
background-size:100%;
background-position:0px 0px;
-webkit-transform: all;
transform: all;
-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out;
}
.myimage01:hover {
background-size:140%;
background-position:-50px -50px;
-webkit-transform: all;
transform: all;
}
<li id="armonioso-text-2" class="widget widget_armonioso_text">
<div class="armonioso-textwidget-wrapper armonioso-textwidget-no-paddings">
<!-- Here I'm currently Applying the efect -->
<div class="armonioso-textwidget myimage01" style="background-image: url(http://dummyimage.com/600x200/000/fff);padding: 40px 30px ;color: #ffffff;text-align: center;">
<h5>hello world</h5>
<h3>Here how works</h3>
<p>Take a look of new things
<p><a class="btn alt" href="about/index.html" target="_self">About me</a>
</div>
</div>
<!-- Here I'm currently Applying the efect -->
</li>
while i was creating a website i stepped into something unexpected.
https://jsfiddle.net/m9qgxeke/3/
As you can see after an image has expanded it returns to it's original size, but the div after jumps over it. I tried everything i could think of, but nothing worked. Is there a way to prevent this to happen?
HTML
<div class="img-gr transition">
<img src="http://lorempixel.com/400/200/city" alt="Placeholder image" class="img-responsive" title="Lavoro 1">
</div>
<div class="img-gr transition">
<img src="http://lorempixel.com/400/200/city" alt="Placeholder image" class="img-responsive" title="Lavoro 2">
</div>
<div class="img-gr transition">
<img src="http://lorempixel.com/400/200/city" alt="Placeholder image" class="img-responsive" title="Lavoro 3">
</div>
CSS
.transition img {
display: block;
transition: transform .2s ease;
-moz-transition: transform .2s ease;
-webkit-transition: transform .2s ease;
-ms-transition: transform .2s ease;
-o-transition: transform .2s ease;
position: relative;
z-index: 2;
}
.transition img:hover, .transition img:active {
transform: scale(1.1);
-moz-transform: scale(1.1);
-ms-transform: scale(1.1);
-webkit-transform: scale(1.1);
z-index: 10;
}
Simply remove the position: relative; from .transition img
This works for me in Chrome: https://jsfiddle.net/m9qgxeke/8/
The trick is to make a transition on the z-index-property that starts after the 0.2 seconds (when the image is back in place):
transition: transform .2s ease, z-index 0.2s 0.2s;
But this would apply to the "in-transition" (smaller image to bigger image) as well, which we don't want, so we have to disable the z-index-transition for the "in-transition" with the active-pseudo-selector:
.transition img:active {
transition: transform .2s ease, z-index 0s;
}
Code is shortened for clarity.
Edit: bumpys solution is much more simple and recommendable, my approach also works for position: relative-elements, in case this is an requirement (which I don't suspect for simple images).
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>