I'm new to CSS and now facing a problem which I can't get rid of.
I made an animation using css3 keyframes. This animation simply changes the rotation of an image whenever someone hovers it. Now I wanted to link this image to a website, but the way I did it, the animation doesn't run at all.
<div class="tunein"><a href="http://www.google.com/">
<img src="https://www.google.com/images/srpr/logo3w.png"></a></div>
.tunein{
position: absolute;
top: 40%;
left: 10%;
display: block;
-webkit-transform:rotate(12deg);
-moz-transform:rotate(12deg);
}
.tunein a:hover{
animation: rotate 0.5s ease-out;
-moz-animation:rotate 0.5s ease-out;
-webkit-animation:rotate 0.5s ease-out;
}
js fiddle for you:
http://jsfiddle.net/9jMqc/
When i add the class tag into the a-element, the offset changes dramatically but the animation works.
I'd propose moving the events onto the <a> link, so moving them as per http://jsfiddle.net/9jMqc/2/
.tunein a {
display: block;
-webkit-transform:rotate(12deg);
-moz-transform:rotate(12deg);
}
.tunein a:hover{
animation: rotate 0.5s ease-out;
-moz-animation:rotate 0.5s ease-out;
-webkit-animation:rotate 0.5s ease-out;
}
I think you were perhaps missing display: block on the <a> link previously - Just for reference, you shouldn't need to use display: block on <div></div>'s as that's their default unless otherwise declared in your CSS.
Related
I´m trying to build up a new site. The work is nearly done, but I need a last detail. I´m using a grid with thumb/headline and link-function to detail sites.
I want to visualize the link-function with some hover-effects (delivered by my template).
This is the link to the project-site - and I´m looking for help on my mainpage:
https://emc.ow-media.de/
If you hover the thumb of the document or the thumbs of the three links at the end of the page, you can see a hover effect. I want to use this effect also on the grid element at the top (the 6 thumbs).
Can you give me a hint, how to get this working with CSS?
Thanks a lot!
You have sample already there. If you inspect the element, you can see how it works. The code the bottom elements use is as follows:
CSS:
figure.sc_image a {
content: '';
width: 100%;
display: block;
height: 100%;
top: 0;
left: 0;
opacity: 0;
position: absolute;
-webkit-transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
-ms-transition: all .4s ease-in-out;
-o-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;
}
figure.sc_image a {
background-color: rgba(50,172,121,0.8) !important;
}
figure.sc_image a:hover {
opacity: 1;
}
HTML:
<figure class="sc_image sc_image_shape_square">
<img src="https://emc.ow-media.de/wp-content/uploads/2021/06/Leistungen-Potentialanalyse1.jpg" alt="">
<a class="img_icon icon-file-pdf" href="http://emc.ow-media.de/was-wir-tun-detail"></a>
</figure>
Essentially what is happening, is that there is an invisible element a, with set opacity of 0. When someone hovers the element it gets to set the opacity of 1. The animation is done by the transition property, which eases the change of opacity. You can mimic the effect on your other elements.
Here is the page in question:
https://www.alchemycreative.studio/test-layout-3/
The little hamburger icon points to "#openModal" but it does not work unless you open it in a new tab. It will disappear fine, however, when you click the X, which points to "#".
They both use the same technique. Can anyone tell me why it's not working for the hamburger? The modal is also doing a weird thing where it comes and goes briefly after page load.
The instructions I followed are here, complete with a demo:
https://www.webdesignerdepot.com/2012/10/creating-a-modal-window-with-html5-and-css3/
Below is my CSS, which takes out all the extra styling:
.modalDialog {
position: fixed;
z-index: 999;
opacity:0;
-webkit-transition: opacity 800ms ease-in-out;
-moz-transition: opacity 800ms ease-in-out;
transition: opacity 800ms ease-in-out;
pointer-events: none;
}
.modalDialog:target {
opacity:1;
pointer-events: auto;
}
this question might be obvious but i'm new in css.
I'm animating a shape so when you hover it, it stretches. I've completed the hover on with a nice ease transition but when you move off the mouse the transition doesn't work. Is there a way to make it happen also in the hover off moment?
.shape1{
position: absolute;
background:red
top:512px;
width:180px;
height:140px;
}
.shape1:hover {
height: 160px;
top:492px;
transition: 0.2s ease;
}
Your answer
You have added the transition property on the hover state of the element. Therefore the transition is not applied when you leave the cursor from the element.
.shape1{
position: absolute;
background: red;
top: 512px;
width: 180px;
height: 140px;
transition: .2s ease; /* move this here from :hover */
}
Further information
Besides this you can also add specific properties to the transition. For example, if you only want the height to be animated you could it like this:
.shape1 {
transition: height .2s ease;
/* this inly affects height, nothing else */
}
You can even define different transition-times for each property:
.shape1 {
transition: height .2s ease, background-color .5s linear;
/* stacking transitions is easy */
}
Add the transition before the :hover, so the transition always applies
.shape1 {
transition: 0.2s ease;
}
The :hover selector is used to select elements when you mouse over them.
W3Schools
When you add also transition to your shape1 class it should works
I'm trying to have a menu that has a submenu and this is what I have for the moment (it's more complex than this), I want to use the transition property:
.product:hover #button-option {
visibility: visible !important;
}
#button-option {
visibility: hidden;
-webkit-transition: visibility .2s;
transition: visibility .2s;
}
Here is my jsfiddle: http://jsfiddle.net/4bsmq2kg/
I want my submenu to appear a little later, or like take some time to appear like in here: http://www.vmware.com
How could I make this work? I tried several things but none has been working. Thanks!
EDIT: I'm actually stupid and didn't realize a mistake there was in the code, but I still cannot find what I really wanted to find.
Visibility will transition, but only in binary (on/off) fashion. Perhaps you want to transition on opacity in addition (since visibility needs to be off to prevent mouse detection on the element). You probably also don't need/want the !important. Also, unless you are targeting old browser versions, you don't need the webkit-transition prefixed property (if you're going to specify it, should be -webkit-transition).
Visibility will not animate well. For that you might better animate opacity:
#button-option {
opacity: 0;
-webkit-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
}
.product:hover #button-option {
opacity: 1;
}
If you want the menu to slide from left to right, then you can also animate position:
#button-option {
left: -300px;
-webkit-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
}
.product:hover #button-option {
left: 0px;
}
You can check for more detail here.
At the end, I mixed opacity with visibility, thank you all! going to try some of your suggestions too, Good Night!
First stackoverflow post, so please forgive if I'm missing something obvious. I did search for an answer first but didn't find one I recognized as relevant.
In this jsfiddle, I have a div that I'm using as a hover target to get some transitions to happen to an <a> element.
http://jsfiddle.net/ramatsu/Q9rfg/
Here's the markup:
<div class="target">Target
<p>.LightMe</p>
</div>
And the css:
body {
background-color: #099;
height: 100%;
width: 100%;
margin-top:200px;
}
.target{
position: absolute;
left: 40%;
height: 100px;
width: 200px;
padding: 20px;
background-color: #ccc;
cursor: pointer;
}
a {
display: block;
position: relative;
padding: 1px;
border-radius: 15%;
}
a.LightMe {
/*Starting state */
background-color: white;
border-style:solid;
border-color:#fff;
top: -120px;
left: -200px;
height: 80px;
width: 80px;
z-index: 10;
opacity: 0;
transition:left 0.55s ease, opacity .5s .7s ease;
-webkit-transition:left 0.55s ease, opacity .5s .7s ease;
-o-transition:left 0.55s ease, opacity .5s .7s ease;
}
.target:hover a.LightMe {
/*Ending state*/
left: 80px;
opacity: 1;
transition:left 0.55s .7s ease, opacity .5s ease;
-webkit-transition:left 0.55s .7s ease, opacity .5s ease;
-o-transition:left 0.55s .7s ease, opacity .5s ease;
}
.target:hover {
transition: background-color 500ms ease;
-webkit-background-color 500ms ease;
-o-background-color 500ms ease;
background-color:#999;
}
Hover over the grey box labeled Target and back off again to see the transitions on the <a> element. It's doing what I want: opacity fades in during position delay, then it slides to the desired position. when moving out of the hover target, the <a> slides to it's original position, then opacity fades back out. All good so far.
The catch is, if the user hovers over the hidden <a> element, it triggers the same set of transitions, which causes all kinds of unintended havoc.
I'd like to prevent any response to a hover directly over the <a> element, and really like to continue to keep it in css if possible.
I tried adding an explicit hover to <a> and .LightMe to override this, to no avail. (Though that could be that I just didn't get the selector syntax right.)
I added the background-color transition to .target intentionally for testing, and it provided an interesting clue: hovering over the <a> triggers the upstream transitions of the .target div. That's about where my brain broke and I decided I'd better seek help.
I'm working with a few things here that are above my head, I just started from the closest thing I could find and worked toward what I needed. This was the starting point jsfiddle (with thanks to the author):
You can start your 'top' position outside of the viewer port and delay the 'top' transition until after your 'left' transition is over. That way the <a> element will not be clickable until the left transition start.
See: http://jsfiddle.net/Q9rfg/4/
Or you can also use this method, combined with the sibling selector as suggested by aorcsik.
Update: another hacky solution is to place a div which is outside, the hover sensitive element, that covers the moving link. Check it out: http://jsfiddle.net/aorcsik/Q9rfg/2/
The problem with my original idea (below) was, that you could not click on the moving link, since it returned to its original position, once you hovered out of the gray box, also the cursor changed over the hidden link.
I would try to get the <a> out of the gray box, put it after, and reference it in css with the sibling selector +.
.mainclass.subclass:hover + a.LightMe {
/* ... */
}
This way it won't trigger the hover effect of the gray box when itself is hovered, and you stay in pure css land.
This would make positioning a bit trickier, here is a fiddle, check it out: http://jsfiddle.net/aorcsik/Q9rfg/1/