HTML Change Image with transition? - javascript

I've been experimenting with HTML5 for a bit, and i wanted to try to make an Image change when a mouse hovers over it. I've tried a couple of methods and none of them gave the desired effect. I've looked through multiple tutorials but they mostly explained how to add effects to the same Image, and not change it entirely.
This is the code i have now, it doesnt actually work as intended:
ul.imagetransition li img:hover {
background-image: url('Data/Images/Image 1Hover.png');
}
<section>
<ul class="imagetransition">
<li><img src="Data/Images/Image 1.png"/></li>
</ul>
</section>
In this code, the original image is previewed correctly, but when the mouse hovers over it it immediately adds a small part of the second image onto the first one. I've tried adding the transition effect code, but it didnt have any effect. I'll be doing more research regarding this, if anyone knows/understands how to get this done, please point me to the right directions! :D
Please let me know if further Information/Code is needed
Greatly appreciated,
Have a good day

Does it work for you?
HTML:
<ul>
<li id="aaa">
<img class="bottom" src="a.jpg">
<img class="top" src="b.jpg">
</li>
</ul>
CSS:
#aaa {
position:relative;
height:100px;
width:100px;
margin:0 auto;
list-style-type: none;
}
#aaa img {
position:absolute;
left:0;
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
}
#aaa img.top:hover {
opacity:0;
}

From past experiences this won't work unless you use JS's getElementById and change the src of the background image. Either that or use a two in one kind of thing like
<div id="parent1">
<ul></ul>
</div>
Where if you hover over it the first one's background would have an opacity of 0 and the ul's opacity to one by using parent/child relation and activation or maybe try add !important at the end of the second background image restrictions like padding won't work coz that would only separate your images even more.
Hope this helps.
Ps: I was writing this on my phone :/ but now i edited it using my laptop
here are some examples using JS
the mouseover thing
and this is for the change image thing
i think you can piece these together finely.

HTML
<img class="bottom" src="a.jpg">
CSS
img
{
width: 100px;
height: 100px;
background: red;
-webkit-transition: width 2s;
transition: width 2s;
}
img:hover {
width: 300px;
}

Related

How to add a hover delay on a menu for a Volusion site?

First of all, I'm using Volusion. Here's my website: www.gtsimulators.com
So if you're familiar enough with it, you will know that it is pretty limited for customization. Here's the thing I'm having trouble to figure it out:
I need to add a slight delay of at least half a second (0.5) when the mouse hover over the categories menu (please check website), so the dropdown won't be triggered immediately when hovering over the menu. I know it can be made with CSS or Javascript. Either way will be good for me.
Further information: As I previously mentioned, I have limited to no access to edit files. I've found the JS file for the navigation here (/a/j/vnav.js) and I can't edit it. Also, here's the CSS file for the navigation (/a/c/vnav.css) and I can't edit it as well.
I do have access to the main html, css and js files.
I will be glad to provide more information if needed.
Please help. Thanks!
UPDATE:
First time I've asked a question via Stackoverflow and the result was awesome thanks to Adam K.
Just added this code into my CSS file and it worked perfectly:
.vnav__subnav, .overlay{
transition: opacity 0.2s, max-height 99s;
display: block!important;
opacity: 0;
pointer-events: none;
max-height:0;
}
li:hover > .vnav__subnav,#display_menu_1:hover + .overlay{
opacity: 1;
pointer-events: auto;
max-height:9999px;
transition: opacity .5s, max-height 0s;
transition-delay: .5s;
}
Again, thanks Adam for the prompt response.
Try something like this
(Defining the actual delay only for the :hover case will make only turning red delayed. Turning back black will be instant. If you want transition delayed both ways, simply set transition-delay only for default state.)
<style>
a{
color:black;
transition:color 0s;
transition-delay:0;
}
a:hover{
color:red;
transition-delay:0.5s;
}
</style>
Well i wanted to show you generic usage.
You can inject this anywhere on your website. I don't think delay is really what you want to go for IMO. - Try this instead. (It works, already tried it in dev tools on your website)
<style>
.vnav__subnav, .overlay{
transition: opacity .5s, max-height 99s;
display: block!important;
opacity: 0;
pointer-events: none;
max-height:0;
}
li:hover > .vnav__subnav,#display_menu_1:hover + .overlay{
opacity: 1;
pointer-events: auto;
max-height:9999px;
transition: opacity .5s, max-height 0s;
}
</style>
This will make submenus and overlay on your website appear smoothly without any changes in javascript or HTML. Just few lines of css is all it takes ;)

How to improve this animation?

I have three divs on the same line. You can check the example here: http://yoyo.ro/abw just scroll to the bottom of the page to the three boxes: Made to Measure, Instagram and Video Tracking.
When I click the left one, I want the other two to slide to the right and some text to appear. I tried to do it, but it seems that I complicated it so much and it isn't even smooth.
function hideTest(){
$(".instagram").addClass("slideout");
$(".videotracking").addClass("slideout");
$(".instagram").animate({left:"150%"},500);
$(".videotracking").animate({left:"150%"},500);
}
function showTest(){
$(".instagram").animate({left:"33.3%"},500);
$(".videotracking").animate({left:"66.6%"},500);
$(".instagram").removeClass("slideout");
$(".videotracking").removeClass("slideout");
}
$(".madetomeasure").on('click',function(){
var testwidth = $(this).find(".vc_btn3-container").width();
$(this).find(".vc_btn3-container").css("width", testwidth);
if(!$(this).hasClass("openslide")){
hideTest();
$(".madetomeasure").addClass("openslide");
$(this).find(".txtbox").animate({left:0},500);}
else {
$(this).find(".txtbox").animate({left:"-100%"},500);
$(".madetomeasure").removeClass("openslide");
showTest();
}
});
here is the css relevant to the JS
.txtbox{
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
width: 66.5%;
display:none;
left:-100%;
padding:0px 15px;
float:left;
position:relative;}
.instagram, .videotracking{position:static;}
.instagram {left:33.3%;}
.videotracking{left:66.5%;}
.instagram.slideout{position:absolute;}
.videotracking.slideout{position:absolute;}
.madetomeasure .button{
z-index:1;
height:300px;
background: url(http://yoyo.ro/abw/wp-content/uploads/2016/02/instagram.jpg) 100% 30% !important;
border: none !important;}
.madetomeasure.openslide {width:100%;}
.madetomeasure.openslide .wpb_wrapper {display:flex;}
.madetomeasure.openslide .txtbox {display:block;}
Thank you so much for the patience... :) I really appreciate it
As far as I know, your problem of smoothness is because:
jQuery change the inline styling of the animated element per frame. That is a lot of work and you can actually see the action if you inspect your element when it's animating.
CSS does poorly on animating left and right. There are many articles about this but here's one if you don't want to search: https://css-tricks.com/tale-of-animation-performance/
The Solution
Fiddle: https://jsfiddle.net/kv5twc64/1/
The solution is very common, and is used by many CSS libraries, a trick using .active, CSS animation and some JS.
Here I used the transition property for .card:
.card {
display:inline-block;
float:left;
max-width:33.333%;
position:relative;
cursor: pointer;
transition: 0.5s all ease-out;
}
If you don't know, transition will create a tweening effect when the elements' property has changed.
And here is the trick: By using ~ selecting the siblings in CSS and the transform property:
.card.active .desc {
transform: translateX(0);
}
.card.active ~.card {
transform: translateX(66.666vw);
}
There are several upsides on using CSS in this case:
You can simplify your JS. The JS became:
$(function(){
$(".card").eq(0).click(function(){
$(this).toggleClass("active");
})
})
You can improve webpage performance
You can have more choices on (simple) easing functions in CSS (jQuery only offers "swing" by default). Check this out: http://easings.net You can do something like this:
transition: all 600ms cubic-bezier(0.77, 0, 0.175, 1);
Hope this can help. But the lesson here is: Use CSS rather than JS when you can!
P.S. 66.666vw means 2/3 the width of the viewport width.

How to make a custom context menu in an Angular App?

I've been working on a custom context menu for a table on one of my views in an angular app. The idea is to display a hidden, absolutely-position div on right click of any particular row in this table.
I think the event is returning the correct clientX and clientY, but where I'm running into trouble is when I try to position this hidden div to the coordinates of the right-click event. What I'm using, right now, is this:
$('.toggled-options-status-change').css({
top: event.clientX,
left: event.clientY
}).show();
where .toggled-options-status-change is the class name of the hidden div.
What's basically happening is that the div is being position is seeming random spots, so it can't simply be fixed by decremented the top and left positions be constant values.
It's hard for me to tell what's going on, and I wish I could share a fiddle or something with you guys. What I'm hoping is that someone has come across an issue like this before and knows a direction to go and investigate further.
Edit - CSS
.toggled-options-status-change {
position: absolute;
display: none;
}
.off-canvas-wrap {
-webkit-backface-visibility: hidden;
position: relative;
width: 100%;
overflow: hidden;
.inner-wrap {
-webkit-backface-visibility: hidden;
position: relative;
width: 100%;
-webkit-transition: -webkit-transform 500ms ease;
-moz-transition: -moz-transform 500ms ease;
-ms-transition: -ms-transform 500ms ease;
-o-transition: -o-transform 500ms ease;
transition: transform 500ms ease;
}
Edit - HTML
relevant html outline:
<html>
<body>
<div class="off-canvas-wrap">
<div class="inner-wrap">
<div ng-view>
...
</div>
</div>
</div>
</body>
</html>
Almost always with these sorts of things, for me at least, the answer is exceedingly simple and makes me look like a fool for missing it the first time around. Oh well, it's nice to figure it out regardless.
top should be clientY, not clientX, and vice versa. omg

does div:after content actually modify width? My transition isnt working with it

Quick code (Not my actual code but it represents it):
#myDiv {
background: black;
color:white;
float:left;
min-width:45px;
max-width:450px;
-webkit-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
#myDiv:hover:after {
width: inherit;
content: " This should resize my div. transitioning the new width.";
}
<div id="myDiv">Here</div>
I know this question might be too tricky because selectors are elements apart (or something like it, I havent gotten too deep into the subject), but I need help finding a work around for this (Javascript welcomed, JQuery too: I would rather not though, since Im not too friendly with heavy libraries for small things), if anyone has time its much appreciated.
If you want to see what Im trying to achieve, comment below and ill post my actual code.
The problem is that transition doesn't work when you go from or to a property with auto. Check this out Transition to and from position Auto
You can do some workaround to achieve what you want e.g:
#myDiv {
background: black;
color:white;
float:left;
width:45px;
-webkit-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
#myDiv:hover{
width: 450px;
}
#myDiv:hover:after {
width: inherit;
content: " This should resize my div. transitioning the new width.";
}
<div id="myDiv">Here</div>
But that depends on your markup and your needs so if this not helps, you can add more details to your question or best add your real code.

Trying to add classes to multiple divs by hovering over one div

Basically, I have a page made up of five vertical stripes of different colors. These will eventually be links to different sections or something like that.
Check out this fiddle to get a general idea of what I'm talking about: http://jsfiddle.net/nolbear/4fea3/
Here's my JavaScript:
$('#banner1').hover(function() {
$(this).toggleClass('forty');
$('#banner2').toggleClass('twenty');
$('#banner3').toggleClass('twenty');
$('#banner4').toggleClass('ten');
$('#banner5').toggleClass('ten');
});
I'm trying to get it so that when you hover over the top stripe, it becomes larger, and all the other stripes get smaller to compensate. The stripes should take up the entire height of the page at all times (that's why I'm using percentages).
I don't understand why the code I've written isn't working, I've taken it directly from other StackOverflow questions that have been answered and it still won't work for me.
The first problem is that you didn't set jQuery in your fiddle
Secondary, you set the height by id which overrides the class values so instead I styled them by class.
http://jsfiddle.net/4fea3/4/
<div id="banner1" class="banner">
</div>
<div id="banner2" class="banner">
</div>
<div id="banner3" class="banner">
</div>
<div id="banner4" class="banner">
</div>
<div id="banner5" class="banner">
</div>
.banner {
width: 100%;
height: 20%;
transition: all 0.2s ease 0.0s;
-moz-transition: all 0.2s ease 0.0s;
-webkit-transition: all 0.2s ease 0.0s;
-o-transition: all 0.2s ease 0.0s;
-ms-transition: all 0.2s ease 0.0s;
overflow: hidden;
}
Your code is working, it's just the css that is not working. You've applied height: 20% to each banner, and then height: x% to each css class that you wish to change the height of the banners. Unfortunately the first height: 20% will override this. I've used !important to fix it in the fiddle: http://jsfiddle.net/4fea3/3/
Ideally you would avoid the !important and update your styling to override correctly when the classes are added.

Categories

Resources