<div class="parentContainer">
<a href="#" class="itemContainer">
<div class="imgContainer"><img src="http://via.placeholder.com/180x180" class="image"/></div>
<div class="title">Title</div>
</a>
</div>
check this link- https://codepen.io/aby30/pen/mqOMom
Here's a Pen that shows how transform:translate along with overflow:hidden is rendered differently on Chrome and Safari (open the link in both browsers and hover over image to see the difference). But when I take a different approach and use positioning (left negative to 30px) for movement instead of transform of the image I get the desired result in Safari along with other browsers.
I'm not able to get my head around this unusual behaviour.
Difference: In Safari when using translate property, then on hover of the image it translates toward right with full square image appearing only while the translation is happening. This is not expected as the parent(.imgContainer) of the image has overflow property as hidden so the edges of the image should not appear at any time.
This is just a bug, and as with all bugs of this nature the fix seems to be as simple as applying any 3d css property to the flickering element.
For example:
.imgContainer {
-webkit-transform: translateZ(0);
...
This is a common issue with Safari.
To solve this use border-radius ( the same one ) on the .image or img as well.
Then you should use vendor prefix for safari -webkit-transform ; -webkit-translate and so on.
Also you could 'force' graphic/hardware acceleration by using a 3d transform with value 0. This way, you ' trick ' the browser to think that there is a complex 3d animation so it allocates more resources.
see snippet below
a* {
color: #333;
}
.parentContainer {
width: 200px;
text-align: center;
}
.imgContainer {
background-color: #fff;
border-radius: 53%;
width: 130px;
height: 130px;
margin: 0px auto 18px;
overflow: hidden;
}
.itemContainer {
display: block;
transition: all 0.3s ease;
}
.image {
display: block;
position: relative;
-webkit-transition: all 0.3s ease;
-webkit-transform: translate(-30px, 0px) translateZ(0);
/* left: -30px; */
bottom: -10px;
border-radius: 53%;
width: 100%;
height: 100%;
}
.imgContainer:hover > .image {
/* left: 0px; */
-webkit-transform: translate(0px, 0) translateZ(0);
}
<div class="parentContainer">
<a href="#" class="itemContainer">
<div class="imgContainer"><img src="http://via.placeholder.com/180x180" class="image"/></div>
<div class="title">Title</div>
</a>
</div>
Related
I've got a simple input toggle that reveals text when 'toggled'.
Codepen
HTML
<div class="window">
<input type="checkbox" id="punch" class="toggle">
<label for="punch">
<img class="arrow" src="http://45.79.67.59/moreinfo_arrow.png">
</label>
<div>
<h3>codepen.io</h3>
</div>
</div>
CSS
div.window {
color: #000;
width: 100%;
background: #fff;
margin: 0px;
font-family: Arial Black, sans-serif;
font-size: 20px;
}
div.window label{
display: block;
width: 1%;
transition: all 0.75s 0.25s;
transform: rotate(0);
}
input.toggle ~ div {
height: 0px; margin: .1rem;
overflow: hidden;
transition: .6s all cubic-bezier(0.730, -0.485, 0.145, 1.620)
}
input.toggle:checked ~ div { height: 60px; }
input.toggle:checked + label { transform: rotate(180deg); }
input.toggle { display: none; }
When the toggle <img> is 'checked', I'd like it to rotate 180˚, however, I've had trouble making the image rotate on it's center axis. It currently rotates on it's edge: good for eliciting a chuckle... not so good for potential users.
Any help is very much appreciated!
Problem
The origin of your transformation is not the center of the image. So it rotates about the wrong reference point. See the following picture:
This picture is showing the result of rotating a square using transform: rotate(45deg) with different transform-origin values.
Solution
Normally just add transform-origin: center center; to the transform property (but to be honest, that's also the default value).
So your actual problem is that you specified the transition on the parent (of the image) what means it will take the center of the parent. Since you specified the width as 1% the center isn't the same as the center of the image. So to solve this I've felt free to change this to the width of the image (what is in this case width:200px;).
Alternatively you could specify the origin manually with absolute values (in your case transform-origin:100px 100px;).
See JSFiddle.
I made a css transition for navigation items in my web pages main nav.
It's a relativley simple effect using the items before element to mask out and hide the text using css transforms and flexbox.
I developed in Chrome and tested in Firefox and Safari (all latest versions) and had to discover that Safari ist not displaying the transition correctly.
I created a short pen, so you can get an idea of the effect.
http://cssdeck.com/labs/owntbier
Is there any way to fix it?
I guess it has something to do with the way that safari interprets the "justify-content" property.
Here is the Code:
HTML
<div class="container">
<ul>
<li>WHY SAFARI, WHY?</li>
</ul>
</div>
SCSS
.container{
position:absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
}
ul{
list-style-type: none;
}
li{
white-space: nowrap;
position: relative;
color: #ff9900;
cursor: pointer;
font-size: 5vw;
font-weight: 900;
&:hover{
&:before{
max-width: 100%;
}
}
&:before{
position:absolute;
left: 50%;
transform: translateX(-50%);
color: #131313;
content: 'WHY SAFARI, WHY?';
display: flex;
justify-content: center;
overflow: hidden;
max-width: 0%;
transition: max-width 0.5s ease;
}
}
NOTE
Necessary vendor prefixes are automatically added by my preprocessor
Your code wont work on Internet explorer 9 also .
all you need to add is ::
For Safari--
**-webkit-transform:translateX(-50%) translateY(-50%);**
For IE9--
**-ms-transform:translateX(-50%) translateY(-50%);**
Hope it works.
I have a wordpress website and I'd like to add some features that my current theme doesn't offer. I'd like the 3 images in the "Pages" section to reduce in size or switch to a different image (same content, smaller resolution) so as to appear smaller then you hover over it. I've managed to accomplish this with a custom HTML page, adding ID's to the images and then adding a version of this to my style.css for each image
#techbutton {
display: block;
width: 125px;
height: 125px;
background: url("http://rafsk.co.uk/wp-content/uploads/2015/10/Logo21-e1445171629993.png") no-repeat 0 0;
}
#techbutton:hover {
background: url("http://rafsk.co.uk/wp-content/uploads/2015/10/Logo2-hover-e1445296643552.png") no-repeat 0 0;
}
#techbutton span {
position: absolute;
top: -999em;
}
After uploading the custom HTML to my server I realised that instead of just overriding the homepage of rafsk.co.uk it also overrode the homepages of all my subdomains.
So how can I do this?
You could do this with a css transform, that would be the easiest way, and you can apply it to all three with a class instead of an id (which should only be used once per page):
So first give the same class to all of the images (meaning to the actual image tag, like <img class="imageclass" src="blah.png" />), and use this in your css:
.imageclass {
display: block;
width: 125px;
height: 125px;
transform: scale(1,1);
}
.imageclass:hover {
transform: scale(0.9,0.9);
}
You could then add a css transition effect if you want it to be smoother:
.imageclass {
display: block;
width: 125px;
height: 125px;
transform: scale(1,1);
transition: transform 0.6s ease-in-out;
}
.imageclass:hover {
transform: scale(0.9,0.9);
}
Here is a working example:
https://jsfiddle.net/f9teea7L/
ALTERNATIVE OPTION #1:
If you can't edit the HTML and can only get an image into the div through the background, you could try adding a background-size property like this. Be aware though that it won't work in IE 8 or lower:
#techbutton {
display: block;
background-image: url('http://vignette1.wikia.nocookie.net/deadliestfiction/images/d/d5/2138464123_1360632315.jpg/revision/latest?cb=20140513035922');
background-size: 100%,100%;
width: 125px;
height: 125px;
transform: scale(1,1);
transition: transform 0.6s ease-in-out;
}
#techbutton:hover {
transform: scale(0.9,0.9);
}
Working Example: https://jsfiddle.net/azx962a9/
ALTERNATIVE OPTION #2:
I've looked at your site though and if I'm understanding what you want to do, it seems to me that simply adding this to your css should work...:
.service-icon {
transform: scale(1,1);
transition: transform 0.6s ease-in-out;
}
.service-icon:hover {
transform: scale(0.9,0.9);
}
I'm building a header that can be extended when clicking a button. Then additional content should slide in from behind the original header. Both header are positioned fixed as they should scroll with the page. To smoothly animate the slide in/out I'm using CSS with transition on transform.
This works fine in Chrome and IE but fails in FF. In FF the rendering is odd. It looks like the border is drawn onto the new position immediatly, then the header slides in and the border in then finally corrected to the correct position. Same on sliding out.
This happens in FF 39.0 on Windows 7. The same version but on Kubuntu Linux does not show this behaviour. I experienced this as well when using translate3d or top properties as workaround.
HTML:
<header id="header">This is the header</header>
<div id="slider">
<div>Slider content goes here</div>
<button id="trigger" type="button">Toggle</button>
</div>
CSS:
#header, #slider {
display: block;
position: fixed;
top: 0;
width: 100%;
height: 50px;
border-bottom: 1px solid black;
}
#header {
background-color: red;
z-index: 10;
}
#slider {
background-color: green;
-webkit-transition: -webkit-transform .5s;
-moz-transition: -moz-transform .5s;
transition: transform .5s;
z-index: 9;
}
#slider.opened {
-webkit-transform: translateY(50px);
-moz-transform: translateY(50px);
transform: translateY(50px);
}
#trigger {
position: absolute;
height: 25px;
bottom: -25px;
right: 20px;
}
JS:
var opened = false;
document.getElementById("trigger").onclick = function () {
document.getElementById("slider").className = opened ? "" : "opened";
opened = !opened;
};
JSFiddle: https://jsfiddle.net/avwhksbw/
So, what's going on here? Are you able to reproduce this weird animation rendering on FF? What could I do about this? Using CSS animations? JQuery?
EDIT: Here is a screenshot that shows the problem. This is taken when the slider opens. Looks kind of similar when closing.
I have a custom CSS button on my site, which rotates fine in Chrome, but Internet Explorer 11 is making it disappear when hovered over, instead of rotating.
You can see the button here (It's the blue "Search now!" button): LINK
When I remove this line from my index file, Chrome will then produce the same wrong effect as IE, so it makes me feel this is causing IE's issue.
<script src="http://taskbasket.net/gallery/themes/matheso/js/modernizr.custom.js"></script>
Can you offer a solution? Thank you.
Internet Explorer doesn't presently have support for preserve-3d, but the team is working to ship it in an upcoming release. That being said, simple examples like yours don't necessarily require this feature, and could be implemented in a more cross-browser manner.
I played a bit with replicating your effect by transitioning two pseudo elements independently:
<div id="button1">
<!-- Preserved your markup -->
</div>
a {
position: relative;
perspective: 500px;
}
a, a::before, a::after {
color: #FFF;
display: inline-block;
line-height: 44px;
box-sizing: border-box;
width: 155px; height: 44px;
backface-visibility: hidden;
text-decoration: none;
text-align: center;
}
a::before, a::after {
top: 0; left: 0;
position: absolute;
content: attr(data-text);
transition: transform 1s;
}
a::before {
background: #0965A0;
transform-origin: 50% 100%;
}
a::after {
background: #2195DE;
transform-origin: 50% 0%;
transform: translateY(100%) rotateX(-90deg);
}
a:hover::before {
transform: translateY(-100%) rotateX(90deg);
}
a::before, a:hover::after {
transform: translateY(0) rotateX(0);
}
Fiddle: http://jsfiddle.net/jonathansampson/ybjv8d7x/
Your effect needs preserve-3d to work.
And preserve-3d is not supported in IE, even though it is planned in the next version
By the way, it is a CSS related problem, javascript is working ok