After discovering and using keyframe, I can add some animation on page loading. Like this http://jsbin.com/orusup/1/edit or like this on graphicfusiondesign.com (demo)
Now I want the inverse: add some animation on "page disappear".
So when I click on any link, I got the same animation just before the next page/link loads.
I know it's easy in JavaScript but I want it in CSS only.
Related
I am building a Wordpress site for my nonprofit using the theme Avada and trying to implement some basic custom code.
I am using a "Modal Text / HTML Link" with an image to link to a modal (a pop-up: https://avada.theme-fusion.com/design-elements/modal-element/ and documentation: https://theme-fusion.com/documentation/avada/elements/modal-element/). To help make it clear to users that they can click the image to produce the modal, I want the opacity to change to 70% on hover over just that image.
I currently have the below in the "text/HTML" field, but it’s causing the hover opacity effect for all images on the page rather than just this one image. How can I amend this code to only cause the effect for the linked image? I know so little about coding but feel like it probably has something to do with divs??? I also get the sense I'm accidentlly mixing css and html.....I think I need the html for this field OR I can have just the image source code in the html, and then implement css.
{<img src="https://staging2.pvdwaterways.org/wp-content/uploads/2021/07/Lilly-Manycolors.png" />
}
img:hover {
opacity: 0.7;
}
Here's a screenshot of the interface with the code entered
Thank you!
As #daniel Theman told already in the comment, you can set a class to your element in element edit on the first page at the bottom and then you add the code to custom css tab in avada theme options. Give your element a unique name as class like hoverop and add this to you custom css tab in theme options:
.hoverop:hover{
opacity:0.7;
}
How to make the text/image emerge when you click on the another text/image? For example, a bottom "help" on the top of this website makes appear the image and the text when you click on it. I'm trying to do the same effect with my personal website. Anybody know the way to get it?
Consider using the JavaScript onClick(); event: http://www.w3schools.com/jsref/event_onclick.asp.
Set your the element that you want to show to display:none; then set to display:block; onclick or even use the jQuery fadeIn effect.
I'm not entirely too sure what you're after, but I hope that this is a start.
Set an ID to the element (like ). In your CSS stylesheet, simply add the following:
#hideMe { display:none; }
I have this problem in Safari and Chrome but not in IE.
When I click a button the mousedown event triggers some kind of CSS rule which makes it slightly wider.
Because of this it drops down onto the next row and the click event is not triggered.
It stays on the next row until the mouse button is released.
I'm working on a large existing site and it's difficult to isolate all the CSS, but I think this could be due to an effect inherent in the browser(s).
Is there a CSS way to stop any effects occuring when the button is clicked?
Thanks for your help.
This is the CSS I have found for :active / :hover.
I don't think this could cause it!
a:hover, a:active
{
text-decoration: none;
}
(The button is an image inside an anchor)
Open your page with Chrome. Right click on the element and select inspect element. On the right handside corner of the inspect element handler, you will see few icons.
Click on the middle one(Which is having a arrow. When you hover it a label will display as "Toggle element State").
Change the element state to active (and to focus if it didn't change anything), and now you will be able to see what css rules are used to apply those changes to your button(It can be a padding or width).
Since now you know what the rule is, you can undo it using another rule (Or using javascript). It's hard to say how to remove the effects without knowing what the effects are.
you can declare a class in css name it for exemple abortmousedowncss :
.abortmousedowncss{
width:yourwidth; !important /* this dont allow any css to overide it ;)*/
}
and you can apply it after with jquery like this :
$('#yourbutton').addClass("abortmousedowncss");
I have tried many different codes but I cant seem to make any of them work or i'm uncertain where to place the code. (I am doing this through html on a tumblr theme)
I am trying to animate a header gif on hover. I have a static gif http://i.imgur.com/K3sHfIF.gif & an animated one http://i.imgur.com/fbiY7A0.gif.
Could someone please show me how to do this to fit into a tumblr.
You cannot animate a gif file on hover; or start a hover animation etc.
What you can do here is to add an image on the main page and change it when there is a hover event.
Here would be the example
<img src="/link_of/image.png" alt="photo" class="header" />
Then the jQuery code would take the action and handle a mouse hover event as
$('.header').hover(function () {
$(this).attr('src', '/link_of/animation.gif');
});
Now when you'll hover over the element. It would get the source attribute of its changed upon a hover event. Remember to always include the jquery source file in your project.
Try making a div (with the static gif inside) where you want the images to be on the site. Then, use an onmouseover call to set the innerHTML of the div to the animated gif and an onblur call to set it back to the static one.
HTML:
<div id="div_name" onmouseover="showAnimated();" onblur="showStatic();">
<img src="source of static gif">
</div>
JavaScript:
function showAnimated(){
document.getElementById('div_name').innerHTML = "<img src=\"source of animated gif\">";
}
function showStatic(){
document.getElementById('div_name').innerHTML = "<img src=\"source of static gif\">";
}
Hope that helps!
I have some tabs for my website where the background-image changes when you click on them.
However when I hover over the tabs the first time after the DOM has loaded, there's a slight delay before the hover-image show, resulting in a jarring effect.
I don't know how to troubleshoot this, any ideas? :)
Live example here: http://jsfiddle.net/timkl/fjupq/ - the delay is not as long on JSFiddle's server - but it's still there.
The solution to this is to use sprites instead of separate images.
http://css-tricks.com/css-sprites/
You use a single image, and instead of changing the background source on :hover, you simply change the background position. This way, the entire image is loaded in advance.
For example, check out Stack Overflow's sprite sheet:
http://cdn.sstatic.net/stackoverflow/img/sprites.png?v=4
You don't have to take it to this extreme, you can just have one image that has both the normal and :hover states, and move it to the left/right or up/down.
A simple solution is to use javascript to pre-load the image. Include this in the HEAD of the page:
<script type="text/javascript">
var img = new Image();
img.src = "http://dummyimage.com/200x10/000000/fff"; // background image
</script>
Another way to do this is to have that image somewhere else displayed, preferably at the end of the page, as a 1px to 1px image, and have it placed outside the page layout. This will preload the image.