I am trying to use the tada animation from font awesome with a custom font I generated from fontastic. I have added the font-awesome-animation.min.css to the header of my WordPress theme file. I have also added this html code to my site (see the membership icon).
<a class="faa-parent animated-hover" href="#">
<div class="service-icon-container">
<div class="fa icon icon-membership faa-tada"></div>
</div>
<h3>Membership</h3>
<p>Membership info text</p>
</a>
Any suggestions on making it work?
You forgot to change the reference of hover class in css.
for your membership icon try adding following code:
a.faa-parent:hover .service-icon-container > .fa.icon {
-webkit-animation: tada 2s linear infinite;
animation: tada 2s linear infinite;}
for all other icons, add anchor tag as you added for membership.
Related
I would like to use HTML and CSS to create a custom block on Squarespace.
The idea is to have an image, when you hover over it you will see the text "Follow On Instagram". This will be a clickable image that will take you to Instagram.
I want the image to automatically show the most recent post on Instagram.
I have already figured out how to create a static background image with the hover function. I just don't know how (or if it's possible) to make that image automatically update.
I have tried pasting the most recent image URL address of a Squarespace Instagram block, but the image does not change when a new photo is posted to Instagram.
<div class="container-6">
<img class="image-6" src="//*an image url address*//" >
<a href="http://instagram.com/"><div class="overlay-6">
<div class="text-6">VitaLife on Instagram</div> </div></a></div>
<style>
.container-6 {position: relative;text-align:center;}
.overlay-6 {position: absolute;top: 0;bottom: 0;left: 0;right: 0;opacity: 0;transition: 0.75s ease;background-color: white;}
.container-6:hover .overlay-6 {opacity: 1; transition: .25s ease;}
.text-6 {position: absolute;}
</style>
I'm trying to fade in a textbox via CSS keyframes:
.otherAnim{
animation-delay:11s;
animation-duration:2s;
animation-iteration-count:1;
animation-fill-mode: forwards;
}
#keyframes Appear{
from {opacity:0;}
to {opacity:1;}
}
<div class="col" style="width:30%;height:100%">
<h2>some text</h2>
<h2 class="otherAnim" style="animation-name:Appear;opacity:0;">some text: </h2>
<input type="text" id=myInput class="otherAnim inputSoFar" style="animation-name:Appear;float:left;height:45px;opacity:0;">
</div>
This works on JSFiddle, but not in my local view of the page (Chrome 57). The weird thing for me is that if I inspect the element, the otherAnim class has dissapeared. This doesn't happen in JSFiddle. I'm using w3.css, but it still works if I load it as a external resource in JSFiddle.
What am I possibly missing ?
Don't put the animation-name property in inline style. You have to put it in the style tag or a linked css file.
I’m currently trying to build my website with only a basic knowledge of HTML / CSS.
http://www.ufo.studio
I’m trying to set up the CSS so that when the user hovers over the main case study images on the home page the and display with an underline.
Here is a section of the HTML for one block on the home page:
—
<div class="asos_content">
<a href="/projects/asos_creates.html">
<img src="img/home/ASOS_home.gif" class ="wow animated fadeInUp imgroll">
<title class="wow animated fadeIn">ASOS Agency Brand Identity</title>
<tags class="wow animated fadeIn">Strategy, Art Direction & Design</tags>
</a>
</div class="asos_content">
—
Ideally if the user hovers over the img then the underlines will appear under the title and tag at the same time too.
Is this possible using CSS? Any help greatly appreciated..
thanks so much.
Ben
You use the :hover pseudo-selector on the surrounding a element then select the appropriate children and apply the appropriate properties.
For example:
.asos_content a:hover title,
.asos_content a:hover tags
{
text-decoration: underline;
}
Note that title and tags are not standard HTML elements. They are probably better represented as h1 and h2 or some other heading element.
Give this a shot using "hover." You can get more info on how this works here if you would like: https://developer.mozilla.org/en-US/docs/Web/CSS/:hover
HTML:
<span class="wow">Some Text That will be underlined when you hover</span>
CSS:
.wow:hover {
text-decoration: underline;
}
Here is a jsfiddle: https://jsfiddle.net/wgny00xo/
What you're trying to do isn't really feasible with CSS, because styles only cascade down nested tags.
What you can do is add a quick snippet of javascript to achieve the same result you're looking for.
function onRoll() {
document.getElementsByTagName("h1")[0].style.textDecoration = 'underline';
document.getElementsByTagName("h2")[0].style.textDecoration = 'underline';
}
h1 {
text-decoration: none;
}
<div class="asos_content">
<a href="/projects/asos_creates.html">
<img src="img/home/ASOS_home.gif" onmouseover="onRoll()" class="wow animated fadeInUp imgroll"/>
<h1 class="wow animated fadeIn">ASOS Agency Brand Identity</h1>
<h2 class="wow animated fadeIn">Strategy, Art Direction & Design</h2>
</a>
</div>
Having html code with several hash links (e.g.href="#login") and css using pseudo selector :target for animation, such as
#login:target ~ #wrapper #console {
-webkit-animation-timing-function: ease-out;
-moz-animation-timing-function: ease-out;
-o-animation-timing-function: ease-out;
-ms-animation-timing-function: ease-out;
animation-timing-function: ease-out;
-webkit-animation-name: scaleOut;
-moz-animation-name: scaleOut;
-o-animation-name: scaleOut;
-ms-animation-name: scaleOut;
animation-name: scaleOut;
}
I would like to add a feature of conditional behavior, based on "source" of the trigger event.
Let's say the html code with
<a class="hidden" id="login"></a>
<div id="wrapper">
<div id="console" class="animate">
...
has somewhere also two links
<a id="link_1" href="#login">
and
<a id="link_2" href="#login">
both pointing to #login. Is it possible to modify css to have different behavior for each of links? In my case, is it possible by pure html and css to do different kinds of animation for both links?
No. :target is the only CSS selector of its type; for any other “behaviour”, you need JavaScript or something server-side.
The closest you can get is #login1 and #login2.
This isn't possible, as you ask it, since CSS has no capacity to conditionally-assess the source of the activity, and is only able to 'react' to the end-result, without the ability to reference the source of the action that 'caused' the :target selector to match.
That said, if you're able to change your HTML, and one of the links, you could approximate it:
<a id="link_1" href="#hidden">Link One</a>
<a id="link_2" href="#login">Link Two</a>
<div id="hidden"></div>
<a class="hidden" id="login"></a>
<div id="wrapper">
<div id="console" class="animate">
</div>
You can target differently:
#hidden:target + #login {
/* style, or trigger animation */
}
#login:target {
/* style, or trigger different animation */
}
The problem, of course, is that this clearly doesn't directly cause the :target selector to match the relevant element in both cases, so the answer must remain, basically: 'no,' this is a case in which JavaScript is probably the only real solution to meet your needs.
I'm trying to animate a fontawesome icon, inside a span it works fine, but when I put the icon inside an anchor it stops working on chrome, on IE it works.
I am using FontAwesome 3.2.1
and this is my code
Html:
<a>
<i class="icon-wrench rotator"></i>
</a>
CSS:
.rotator {
display: inline-block;
-webkit-animation: rotate 2.5s 4 ease;
-webkit-transform-origin:90% 35%;
}
#-webkit-keyframes rotate {
from {
-webkit-transform: rotate(-12deg);
}
to {
-webkit-transform: rotate(112deg);
}
}
I tried it with FontAwesome 3.0.2 and it works, when I upgraded to 3.2.1 it stopped working, on chrome at least.
Thanks in advance
Edit
I also have more html inside the anchor and I don't want that to rotate so adding the 'rotator' class to the anchor won't do it
Edit
This is the actual html (the example above is simplified):
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<i class="icon-bell-alt icon-animated-bell icon-only"></i>
<span class="badge badge-success">5</span>
</a>
Add the rotator class to the anchor instead. It will start rotating on page load, assuming this is what you want?
http://jsfiddle.net/7kANu/4/
<a class="rotator">
<i class="icon-wrench"></i>
</a>
EDIT: Are you not able to wrap the icon in a div and assign the rotator class to that as a workaround?