I'm having a problem with this css transition code. It expands to a new height on hover fine, but I need it to go back to it original height when out hover or mouseout. (Like a pencil ad) Currently, on mouseout it stays expanded and the cursor is stuck on the hyperlink. Current page link is http://hswheels.autoconx.com/
Any help would be great appreciated.
.grow {
height: 30px; /* Origional height */
width: 780px; /* Origional width */
transition:height 0.5s ease-in-out; /* Animation time */
-webkit-transition:height 0.5s ease-in-out; /* For Safari */
}
.grow:hover {
height: 345px; /* This is the height on hover */
background:url('http://www.heraldstandard.com/app/media/wheels/expanded2.jpg')
}
.grow:hover a {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
text-decoration: none; /* No underlines on the link */
z-index: 10; /* Places the link above everything else in the div */
background-color: #FFF; /* Fix to make div clickable in IE */
opacity: 0; /* Fix to make div clickable in IE */
filter: alpha(opacity=1); /* Fix to make div clickable in IE */
}
Because you have your anchor set to position:absolute, it's taking up the full page.
You simply need to set position:relative on the parent element (in this case .grow) so that the anchor is absolutely positioned to the parent, instead of the page.
.grow {
position:relative;
height: 30px; /* Origional height */
width: 780px; /* Origional width */
transition:height 0.5s ease-in-out; /* Animation time */
-webkit-transition:height 0.5s ease-in-out; /* For Safari */
}
added a fiddle: http://jsfiddle.net/3nuhev2k/2/
Your problem seems to be the 100% height and 100% width on your link on hover. It is as big as your website.
Related
I have a Button inside a div in which the tick mark appears as we click. The tick mark is added using after pseudo class. But the things looks choppy in browsers (Chrome and Safari) of iOS devices where the animation appears to be stopped and resumes after sometime.The div outside that contains button also has :active pseduo class which transforms it.
//outer div contains the button
div:active {
transform: scale(0.95);
}
// add tick with after pseudo class
.draw:after {
height: 60px;
width: 30px
content: '';
left: 14px;
top: 42px;
position: absolute;
transform-origin: left top;
animation-duration: 300 ms; // animation duration applied it
transform: scaleX(-1) rotate(120deg); // transform applied for the tick mark
animation-name: animate-tick;
}
// keyframes for animation
// animation height and width applied
#keyframes animate-tick {
0% {
height: 0; width: 0;
}
40% {
height: 0px; width: 30px;
}
100% {
height: 60px; width: 30px;
}
}
Have you added #-webkit-keyframes?
Create a named set of keyframes in CSS using the #-webkit-keyframes rule. The set must include at least one keyframe.
Set the -webkit-animation-duration property to a positive, nonzero value.
Set the -webkit-animation-name property to the name of the set of keyframes.
Referring to this sample:
https://codepen.io/jyloo/pen/KKwoLKB
I noticed when I have an animated container with animation-fill-mode set to forward, the absolute positioned child elements (popup) inside it doesn't display as expected, and it seems like their z-index is being ignored.
My animation:
.animate {
animation-direction: reverse;
}
.animate.animate--from-bottom {
opacity: 0;
animation: from-bottom 0.3s ease-out;
animation-fill-mode: forwards;
}
#keyframes from-bottom {
0% {transform: translateY(80px);opacity:0;}
100% {transform: translateY(0px);opacity:1;}
}
My Child Element (popup)
.popup {
z-index: 10;
position: absolute;
background: white;
padding: 0 1rem;
box-shadow: 2px 2px 5px 5px rgba(0,0,0,0.1);
width: calc(300px - 2rem);
}
If I remove the animation-fill-mode, the child elements display just fine.
Can anyone help me to understand this behavior and the workaround so that my child element (popup) can work find under and animated parent.
you can the css property like below for 3rd div.
To make 2nd div's content visible on top, you can try setting 3rd's z-index to lower value.
.dv {
position: relative;
z-index: -1;
}
demo - https://codepen.io/AB-DEV/pen/LYEdKPj.
you have to add class to the parent <div> of popup.
suppose I have add class have_popup to the parent div of popup <div class="card have_popup">.
now apply css to that class as below:
.have_popup {
position: relative;
z-index: 1;
}
I hope this will works fine for you.
Thank you...
I'm working on this mobile menu where you can expand and collapse different categories. When doing so, a sliding animation should be performed on the expanded submenu (when expanding) or on the top-level menu (when collapsing).
The structure of the HTML is the following:
<div class="slideOpenMainMenu">
<div class="sideMenuGeneral">
...Top-level menu...
</div>
<div class="sideMenuPanelMainChildren">
...Expanded submenu...
</div>
</div>
By adding and removing classes, I show the appropriate div while hiding the other from view. As you'll notice, I go out of my way to not use anything like display:none; since then I won't be able to animate the containers. Instead I use a combination of width, height, visibility and flex properties to hide and show the containers.
/* Menu parent container */
.slideOpenMainMenu {
position: fixed;
width: 100%;
box-sizing: border-box;
background: linear-gradient(90deg, #12416e 0%, #0d3050 100%);
display: flex;
justify-content: center;
}
/* Top-level menu - Initial state */
.sideMenuGeneral {
width: 100%;
max-width: 620px;
display: flex;
flex-flow: column;
padding: 20px 16px 0 16px;
box-sizing: border-box;
overflow: hidden;
}
/* item submenu - Initial state */
.sideMenuPanelMainChildren {
width: 0;
height: 0;
flex: 0 1 0;
max-height: 100vh;
overflow: hidden;
visibility: hidden;
-webkit-overflow-scrolling: touch;
}
/* Top-level menu - Expanded state */
.slideOpenMainMenu.item-expanded .sideMenuGeneral {
width: 0%;
padding: 0 !important;
visibility: hidden;
}
.slideOpenMainMenu.item-expanded .sideMenuPanelMainChildren {
flex: 1 1 auto;
flex-flow: column;
width: 100%;
height: auto;
overflow: scroll;
visibility: visible;
}
For the animation, I use transform:translateY and opacity properties to create the sliding effect I want.
/* Initial state */
.slideOpenMainMenu .sideMenuPanelMainChildren {
opacity: 0;
transform: translateX(30%);
transition: opacity 0.5s ease, transform 0.5s ease, visibility 0s ease;
}
.slideOpenMainMenu .sideMenuGeneral {
opacity: 1;
transform: translateX(0%);
transition: opacity 0.5s ease, transform 0.5s ease, visibility 0s ease;
}
/* Expanded state */
.slideOpenMainMenu.item-expanded .sideMenuPanelMainChildren {
opacity: 1;
transform: translateX(0%);
}
.slideOpenMainMenu.item-expanded .sideMenuGeneral {
opacity: 0;
height: 0px;
transform: translateX(-50%);
}
As you can see on this fiddle, the animation works well in Chrome and Firefox. Not so well on Webkit and Edge. From what I can tell, there seems to be some kind of conflict between the change in width and the transitions, because when I disable changes in width, you can see the animation play out. What could cause the change in behavior between platforms? Is there a way to correctly sequence the changes?
So while writing this question, I arrived at the answer (as it often happens). The issue seems to be rooted in that the sequence of CSS property changes is different on different browsers. by adding a tiny delay (0.01s) to the transform transition I got it to work, like so:
transition: opacity 0.3s ease, transform 0.3s ease 0.01s, visibility 0s ease;
Still, I find this a little odd and also interesting. If anyone has info on how these things are sequenced in the browser that'd be really great to learn.
I've been trying to achieve this effect to my site, but it seems that the code isn't working.
Here's the sample site.
And here's the site I'm working on.
I'm mainly changing this part of the theme..
.main-content-area img.wp-post-image {
min-width: 100%;
height: auto;
}
.main-content .wp-post-image {
}
.main-content-area img {
max-width: 100%;
}
Changing the min-width and height would reflect the changes, I'm not sure how to do it when hovering the image. Any advice would help. Thanks!
Maybe try the CSS Transform Scale, paired with CSS Transition (which makes the css changes happen over a set interval of time). Not my Fiddle, but here it is:
http://jsfiddle.net/27Syr/1206/
.image {
width: 100%;
height: 100%;
}
.image img {
-webkit-transition: all 1s ease; /* Safari and Chrome */
-moz-transition: all 1s ease; /* Firefox */
-o-transition: all 1s ease; /* IE 9 */
-ms-transition: all 1s ease; /* Opera */
transition: all 1s ease;
}
.image:hover img {
-webkit-transform:scale(1.25); /* Safari and Chrome */
-moz-transform:scale(1.25); /* Firefox */
-ms-transform:scale(1.25); /* IE 9 */
-o-transform:scale(1.25); /* Opera */
transform:scale(1.25);
}
Feel free to ask me anything else if you have any questions about it.
I have collection of images in a simple gallery that I want to transform from small to large smoothly on mouseover.
I am currently doing this by revealing the actual size of an image when the mouse is over but forcing it to a certain size when it is not and hiding the real size with display:none.
I want to include some webkit transformations to do this over a 1s period to improve the transitions. I understand webkit is to transform an element between two states however is there anyway I can make this happen.
I also want to avoid JavaScript.
.reveal a .preview
{
display: none;
}
.reveal a:hover .preview
{
display: block;
position: absolute;
z-index: 1;
}
.reveal img
{
background: #fff
padding: 2px;
vertical-align: top;
width: 100px;
height: 75px;
}
.reveal li
{
background: #eee;
display: inline;
float: left;
margin: 3px;
padding: 5px;
position: relative;
}
.reveal .preview
{
border-color: #000;
width: auto;
height: auto;
}
without the html (ie jsfiddle) it's hard for me to insert the solution within your code.. but here is a generic solution http://jsfiddle.net/9QVae/2/
img
{
width:100px;
height:100px;
background:red;
transition:width 1s, height 1s;
-moz-transition:width 1s, height 1s, -moz-transform 1s; /* Firefox 4 */
-webkit-transition:width 1s, height 1s, -webkit-transform 1s; /* Safari and Chrome */
-o-transition:width 1s, height 1s, -o-transform 1s; /* Opera */
}
on hover:
img:hover
{
width:200px;
height:200px;
}
so the trick is to specify the css property you want to add an effect to (ie width)
then specify the duration of the event ie transition:width 1s; then you specify the final dimension under the :hover selector
note: transition does not work on IE