I've got a box with a nice hover overlay that animates in. This works fine on all browsers, however on Safari (desktop and mobile) there are some styles that aren't applied correctly (Width, height, and padding). When I toggle these styles off and on again using the inspector everything is as it should be, Safari just doesn't seem to correctly apply at the beginning. Also, there is no CSS inheritance issue as Safari claims to be using the rules as defined below, adding !important has no effect. See code and images below.
HTML
<div class="col-md-5 hla-building-col animated fadeInUp" style="height:350px;background-image:url(/placeholder.jpg)">
<div class="overlay text-center">
<h3>Karma</h3>
<p>Sitting right in the heart of it all...</p>
<a>Learn More</a>
</div>
</div>
CSS
.hla-building-col {
padding: 0;
box-shadow: -1px 0px 50px -6px rgba(102,103,102,1);
}
.hla-building-col .overlay {
background-color: rgba(255,255,255,.9);
width: 80%;
height: 40px;
padding: 8px 15px;
margin: 0 auto;
transform: translateY(165px);
transition: all 600ms ease;
}
.hla-building-col:hover .overlay {
width: 100%;
height: 100%;
padding: 100px 15px;
/**** EDIT: Properties above are not rendering ****/
margin: 0 auto;
transform: translateY(0);
/* transition: all 600ms ease; */
animation-duration: 1s;
animation-name: slidein;
}
.hla-building-col .overlay p, .hla-building-col .overlay a {
opacity: 0;
}
.hla-building-col:hover .overlay p, .hla-building-col:hover .overlay a {
opacity: 1;
transition: all 1000ms ease;
transition-delay: 1000ms;
}
#keyframes slidein {
from {
width: 60%;
height: 40px;
transform: translateY(165px);
padding-top: 8px;
}
to {
width: 100%;
height: 100%;
transform: translateY(0);
padding-top: 100px;
}
}
Safari uses WebKit, you can add it to your css with the -webkit- prefix.
Read more about it here: en.wikipedia.org/wiki/WebKit and here: developer.mozilla.org/en-US/docs/Web/CSS/Webkit_Extensions
Related
I came across a strange issue on Safari. Please take a look at: https://codepen.io/enguerranws/pen/PomzqWe
If you go hover the lightly red box, you'll notice a transition on an element inside.
If you test it in Chrome or Firefox, the animation runs as expected: it's a small black circle that scales up.
On Safari, it goes weird: it's a black square with some kind of transparency that goes round and fully opaque when the transition ends.
Here's the relevant part of code:
#test:hover #circle {
transform: scale(200);
}
#circle {
position: absolute;
transition: -webkit-transform .5s ease-in-out;
transition: transform .5s ease-in-out;
/* transition: all 1s ease; */
width: 2px;
height: 2px;
top: 30px;
border-radius: 10px;
mix-blend-mode: difference;
background-color: #000;
}
Does anyone as quick and dirty hack for this?
EDIT:
Actually, I found a way to get around this issue using width and height values for transform.
Try to use will-change: transform;. Added to your code:
#test {
width: 400px;
height: 400px;
position: relative;
overflow: hidden;
padding: 40% 10px;
background: rgba(255,0,0,.1);
}
#test:hover #circle {
transform: scale(1);
}
#circle {
position: absolute;
transition: transform .5s ease-in-out;
will-change: transform;
transform: scale(.005); /* point */
transform-origin:left top;
width: 2px;
height: 2px;
top: 30px;
border-radius: 400px;
width: 400px;
height: 400px;
background-color: #000;
}
<div id="test">
<div id="circle"></div>
Text here
</div>
I have 2 features on a page, both using Transform ease when moused over. The image on the left (the character), when moused over, eases into position. The buttons in the middle of the page are supposed to scale up, but ease to the enlarged scale.
I've tried copying the code for the part that works, and using that code respectively on the buttons, but I still can't achieve the 'ease' transition
This is the CSS for the part of the site that functions as I want it to:
#side {
position: fixed;
bottom: -10px;
left: -6px;
}
.magna {
height: 400px;
width: auto;
}
.moving {
position: relative;
transition: transform 0.3s ease;
transform: translateY(10px);
}
.moving:hover {
transform: translateX(5px);
}
This is the CSS for the buttons, that don't ease in:
#social {
margin: 0px auto;
text-align: center;
margin-top: calc(97vh - 500px);
}
.social-icon {
width: 80px;
height: 80px;
margin: 0px auto;
transition;
transform 0.3s ease;
}
.social-icon:hover {
transform: translateY(-8px);
transform: scale(1.12);
}
.middle {
padding: 0px 50px 0px 50px;
}
The project can be found live at: http://51.38.83.57/
I am looking for the buttons in the center's scale to increase but to ease into the new size as opposed to snapping to the new size
Previous code was:
.social-icon:hover { transform: translateY(-8px); transform: scale(1.12); }
Changed to:
.social-icon:hover { transform: translateY(-8px) scale(1.12); }
Suggestion from cYrixmorten was correct
Replace transform: 0.3s ease with transition: 0.3s ease;
#social {
margin: 0px auto;
text-align: center;
}
.social-icon {
width: 80px;
height: 80px;
margin: 0px auto;
transition: 0.3s ease; /* Here's the error */
}
.social-icon:hover {
transform: translateY(-8px);
transform: scale(1.12);
}
.middle {
padding: 0px 50px 0px 50px;
}
<div id="social">
<img class="social-icon" src="https://via.placeholder.com/80">
<img class="social-icon middle" src="https://via.placeholder.com/80">
<img class=" social-icon" src="https://via.placeholder.com/80">
</div>
Here's the CodePen.
The square changes to a circle as expected when it slides to the right, but when it returns back to the left, it stays a circle instead of changing to a square.
Also, I can only click the <a> once. If I try to click multiple times, it doesn't work.
Trying to do this with only CSS (if possible).
body {
margin-top: 30px;
background: gainsboro;
}
.container {
margin: auto;
width: 100%;
}
.path {
position: relative;
overflow: hidden;
width: 100%;
height: 80px;
x-background: white;
}
#keyframes ani {
0% {
left: 0;
}
50% {
left: 95%;
}
100% {
left: 0;
}
}
.shape:target {
border-radius: 50%;
transition: all .7s ease-in-out;
animation-name: ani;
animation-duration: 2s;
animation-direction: alternate;
animation-fill-mode: none;
}
.shape {
position: absolute;
left: 0;
background-color: slateblue;
width: 80px;
height: 80px;
display: block;
border-radius: none;
transition: border-radius .4s ease-out;
}
<div class="container">
<div class="path">
<span id="elem" class="shape"></span>
</div>
</div>
The closest you can get with just CSS is this, as far as I know:
body {
margin-top: 30px;
background: gainsboro;
}
.container {
margin: auto;
width: 100%;
}
.path {
position: relative;
overflow: hidden;
width: 100%;
height: 80px;
x-background: white;
}
#keyframes ani {
0% {
left: 0;
}
50% {
left: 95%;
}
100% {
left: 0;
}
}
.path a:focus .shape {
border-radius: 50%;
transition: all .7s ease-in-out;
animation-name: ani;
animation-duration: 2s;
animation-direction: alternate;
animation-fill-mode: none;
}
.shape {
position: absolute;
left: 0;
background-color: slateblue;
width: 80px;
height: 80px;
display: block;
border-radius: none;
transition: border-radius .4s ease-out;
}
<div class="container">
<div class="path">
<span id="elem" class="shape"></span>
</div>
</div>
The problem before was triggering the state with :target:. This is tough to debug with sites like Codepen or other embedded editors, since you can't see the hash change. Basically, clicking the link would append #elem to the URL, apply the :target styles to .shape, and stay like that until the hash changes.
This solution uses :focus, which gets you closer to your goal, but not all the way. To repeat the animation, you need to defocus/blur the circle, then click it again.
I'm usually all for CSS-only effects, but I'm pretty sure you'll need Javascript for this. Something as simple as applying a class on click, waiting 2 seconds, then removing the class would accomplish the same effect more reliably.
I'm having problems with getting any form of transition on this hover. I want it to appear a little slower than just abruptly when hovering over it. So maybe just a delay? Or an ease? Anyway I can't seem to get any of these things to work.
.forum-image {
float: left;
width: 75%;
overflow: auto;
position: relative;
opacity: 1;
transition: opacity 0.3 ease-in;
-webkit-transition: opacity 0.3 ease-in;
background-color: #dcdcdc;
}
.forum-image:hover .descriptionbox {
visibility: visible;
}
.descriptionbox {
opacity: 0.8;
background-color: #FFF;
width: 100%;
height: 100%;
visibility: hidden;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */
padding: 10px;
}
<div class="forum-image">
<img src="http://i.imgur.com/VwTgk9a.png">
<div class="descriptionbox">
Testtesttest
</div>
</div>
Instead of using "visibility:hidden" try changing just the opacity, like so:
.forum-image:hover .descriptionbox {
opacity: 0.8;
}
And then put the transition code on the description box:
.descriptionbox {
/* Other properties... */
padding: 10px;
opacity: 0; /* Start opacity at 0, changes when hovered... */
transition: opacity 0.3s ease-in;
}
Now the description box has the transition property, and when the image is hovered, the new opacity is applied (with the transition time set in the original class). Then that new opacity class is removed when the mouse exits the area.
Make sure you remove
visibility: hidden;
from the original code, or you'll never see anything! (This messed me up at first when i was trying to fix it)
Here is a JSfiddle for demonstration
.forum-image {
position: relative;
display: inline-block;
}
.descriptionbox {
position: absolute;
background: #ffffff;
left: 0;
top: 0;
right: 0;
bottom: 0;
opacity: 0;
-webkit-transition: opacity 1s; /* For Safari 3.1 to 6.0 */
transition: opacity 1s;
}
.descriptionbox:hover {
opacity: 1;
}
<div class="forum-image">
<img src="http://i.imgur.com/VwTgk9a.png" />
<div class="descriptionbox">
Testtesttest
</div>
</div>
I have an image which is divided into two equal parts. I am trying rotate the right part of the image in -180°(anti-clockwise) around y axis on hover.
Problem is some times(randomly) image gets rotated in 180°(clockwise) instead of -180°(anti-clockwise). what might be the reason behind this? I am using chrome.
css:-
.container {
position: relative;
margin-top : 10px;
width : 500px;
height: 330px;
-webkit-perspective: 1500px;
box-shadow: 3px 3px 13px #AAA;
}
.frontDiv {
padding: 20px;
width: 500px;
height: 330px;
}
.frontImg {
position: absolute;
border:1px solid;
height : 281px;
width : 225px;
overflow: hidden;
background-image: url('iday.jpg');
transition:all 1s ease-in-out;
-webkit-transition:all 1s ease-in-out;
backface-visibility : hidden;
-webkit-transform-origin:0% 0%;
}
.f1 {
top: 20px;
left:20px;
background-position: 0px 0px;
}
.f2 {
top: 20px;
left:245px;
background-position: -225px 0px;
}
.frontDiv:hover .f2
{
-webkit-transform : rotateY(-180deg);
}
html:-
<article class='container'>
<div class='frontDiv'>
<div class='frontImg f1'></div>
<div class='frontImg f2'></div>
</div>
</article>
fiddle
Some of the browsers are not supported rotate like,
Internet Explorer 9 (and earlier versions) and Opera does not support the rotateX or rotateY method.
else try
.frontDiv:hover .f2
{
transform: rotateY(-180deg);
-ms-transform: rotateY(-180deg); /* IE 9 */
-webkit-transform: rotateY(-180deg); /* Safari and Chrome */
}