I have a graphic in XD that animated on hover. I want to implement it on my website.
This is similar to this screen capture here
I tried it using CSS transition but not working. Is there anyone who can help me to do this? My Code is below.
<div class="graphic"></div>
<style>
.graphic{
width: 500px;
height: 500px;
background-image: url(images/Illustration-Idle.svg);
background-repeat: no-repeat;
transition: background-image 5s ease-in-out;
}
.graphic:hover{
background-image: url(images/Illustration-Hover.svg);
}
</style>
You need to apply class or Id to bull and arrow 'path' of svg. Then use transition on them. I would recommend put your SVG in div directly.
.bull{
transition: all 1s ease-in-out;
}
svg:hover .bull{
transform: translate(-50px, 50px);
}
.arrow{
opacity:0;
transition: all 1s ease-in-out;
}
svg:hover .arrow{
opacity: 1;
transform: translate(50px,0);
}
Related
This is an example of the effect I want:
http://photoswipe.com/
The same effect is used for image zooming on WhatsApp web.
I want to zoom elements (not just images) to the center, with an animation scaling element from its position to the center of the page.
The animation should be css based, JS should not be used for animation purposes.
I've tried the following code, which doesn't do the job:
<div></div>
With the css:
div {
width: 100px; height: 100px; background: blue;
transition: transform 1s
}
div:hover {
transform: scale(2);
}
And, what's the difference between animating transform: scale or width/height?
Thanks
EDIT:
Another attempt:
http://jsfiddle.net/4w06Lvms/
I have made something similar to what you want (view in full screen). You can modify it as per needs. Move pointer out of the screen to get back to original state.
Also, animating using scale is better as you might not know the exact height and width in pixels if there are multiple images and using the same scale value gives your code uniformity.
Hope it helps.
html,body{
margin:0;
}
.container{
background:yellow;
display:flex;
width:100vw;
height:100vh;
justify-content:center;
transition: 0.5s ease;
vertical-align:center;
}
.imageHover{
display:flex;
height:300px;
width:200px;
transition: 0.5s ease;
}
img{
position:absolute;
height:300px;
width:200px;
transition: 0.5s ease;
}
.container:hover > .imageHover{
height:100vh;
background-color:black;
width:100vw;
transition: 0.5s ease;
}
.container:hover > .imageHover > img{
transform:translate(240%,50%) scale(1.6);
transition: 0.5s ease;
}
<div class="container">
<div class="imageHover">
<img id="yo" src="https://picsum.photos/200/300
" alt="">
</div>
</div>
You can set the position of the image to fixed, but you will need to know the offset of x and y position of the image, after that start the animation.
In this case the offset x and y are 30px, because I've set parent div padding to 30px.
When the window is scrolled down or right. You have to recalculate the top and left values of the image. For that you'll need JS.
I've set the top and left to the offset values before I've set the position to fixed. Then the image starts moving at the right position.
On photoswipe, they are using a translate3d() function and they are using JS, too. I have no idea what they are doing.
#image {
/* top and left offset */
top: 30px;
left: 30px;
width: 200px;
height: 200px;
transition: top 2s, left 2s, transform 2s;
}
#image:hover {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
#offset {
background-color: beige;
height: 1000px;
/* given offset */
padding: 30px;
}
<div id="offset">
<img id="image" src="https://picsum.photos/200/300
" alt="">
</div>
Please have a look at the animation below. While you may see that it works on PC, there must be something wrong since it does not work on mobile. For example on Android, the image is zoomed and with opacity 1 from the very beginning. I assume that the transition has been made but the duration was 0s. Thank you for your help.
$(document).ready(function(){
$(".photo").css(" -moz-transform", "scale(1.2)");
$(".photo").css("-webkit-transform", "scale(1.2)");
$(".photo").css("-o-transform", "scale(1.2)");
$(".photo").css("opacity", "1");
$(".photo").css("transform", "scale(1.2)");
});
.photo {
display: inline-block;
vertical-align:top;
max-width:100%;
opacity: 0.1;
-moz-transition: transform 40s, opacity 6s;
-webkit-transition: transform 40s, opacity 6s;
transition: transform 40s, opacity 6s;
}
.photoDiv {
display: inline-block;
background-color: #f1f1f1;
width: 100%;
position: relative;
overflow: hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="photoDiv">
<img class="photo" src="https://img-aws.ehowcdn.com/877x500p/s3-us-west-1.amazonaws.com/contentlab.studiod/getty/f24b4a7bf9f24d1ba5f899339e6949f3">
</div>
I think it's cleaner to remove the CSS from JS. Also jQuery is redundant and way too big for what you are trying to do here. Also make sure to add the JS at the end of the body. This way you are sure the content is loaded before JS will even be loaded.
window.addEventListener('load', function() {
var photos = document.getElementsByClassName('photo');
if( photos )
{
for( var i = 0; i < photos.length; i++ )
{
var photo = photos[i];
photo.classList.add('active');
}
}
});
.photo {
display: inline-block;
vertical-align:top;
max-width:100%;
opacity: 0.1;
/*ease-in-out is the animation, 2s is the delay/ pause*/
transition: transform 40s ease-in-out 2s, opacity 6s ease-in-out 2s;
transform: scale(1);
}
.active {
opacity: 1;
transform: scale(1.2);
}
.photoDiv {
display: inline-block;
background-color: #f1f1f1;
width: 100%;
position: relative;
overflow: hidden;
}
<div class="photoDiv">
<img class="photo" src="https://img-aws.ehowcdn.com/877x500p/s3-us-west-1.amazonaws.com/contentlab.studiod/getty/f24b4a7bf9f24d1ba5f899339e6949f3">
</div>
I want to use this functionality in my website (when press in 'SHOW IT') --> http://labs.voronianski.com/jquery.avgrund.js/
The problem is that this functionality need to put body height to 100%. In some time, in me site I need to detect the scroll user to make topbar appear and disappear em some positions.
So to can join this two functionality's, I only change body height to 100% when I press button to show the div avground. But where I have a problem: the button is on page footer and when I change body height, they automatically send me to the top of page and after show de div avground.
Is any way to this don't happen or is possible to scroll to footer before the div avground appear?
If someone have another solution, I appreciate.
Thanks
Have you tried using bootstrap's modals? They are very simple to make and look nicer in my opinion.
http://getbootstrap.com/javascript/
You don't actually have to do that, for that animation you can use simple CSS3:
CSS:
#layer-body {
-webkit-transition: -webkit-transform 0.5s;
-moz-transition: -webkit-transform 0.5s;
transition: transform 0.5s;
}
#layer-body.hide {
-webkit-transform: scale(0.8);
-moz-transform: scale(0.8);
transform: scale(0.8);
}
#menu {
background: rgba(208, 31, 60, .95);
position: fixed; top: 0; left: 0; z-index: 4;
width: 100%; height: 100%;
}
#menu.show {
visibility: visible;
-webkit-transform: translateY(0%);
transform: translateY(0%);
-webkit-transition: -webkit-transform 0.5s;
transition: transform 0.5s;
}
#menu.hide {
visibility: hidden;
-webkit-transform: translateY(100%);
transform: translateY(100%);
-webkit-transition: -webkit-transform 0.5s, visibility 0s 0.5s;
transition: transform 0.5s, visibility 0s 0.5s;
}
HTML:
<body>
<div id="layer-body"></div>
<div id="menu"></div>
</body>
This means, all of your website will be inside #layer-body, and the menu inside #menu.
So when you open the menu you'll have to add the class HIDE to the #layer-body and SHOW to the #menu.
So far I've got this code
http://jsfiddle.net/Nq79H/1/
but I want to fadeout the image in order to leave only the text visible.
Do I need to change the javascript or write a new css div?
$('.text').hide().removeClass('text').addClass('text-js');
$('.thumb').hover(function(){
$(this).find('.text-js').fadeToggle();
});
...but I want to fadeout the image in order to leave only the text visible.
Simply add .fadeToggle() to the img element as well:
$('img', this).fadeToggle();
JSFiddle example.
Here is the CSS3 transition solution:
jsFiddle
CSS
.thumb .text {
display: block;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
background: #999;
background: rgba(0, 0, 0, 0.3);
text-align: center;
-webkit-transition:opacity .5s ease;
-moz-transition:opacity .5s ease;
transition:opacity .5s ease;
opacity:0;
}
.thumb:hover .text {
opacity:1;
}
.thumb img {
opacity:1;
-webkit-transition:opacity .5s ease;
-moz-transition:opacity .5s ease;
transition:opacity .5s ease;
}
.thumb:hover img {
opacity:0;
}
Support
The support for CSS3 transitions is pretty decent now, the latest versions of all the major browsers (Safari, Chrome, Opera, Firefox) all support transitions. IE on the other hand only supports it from version 10. Transitions are nice though in that they don't crash and burn when something doesn't support it. The opacity of the element will still change, there will just be no transition.
References
Caniuse.com transitions
If you want to fadeIn text and fadeOut image, just add one more line:
$('.text').hide().removeClass('text').addClass('text-js');
$('.thumb').hover(function(){
$(this).find('.text-js').fadeToggle();
$(this).children("img").fadeToggle();
});
$(this).find('img').fadeToggle();
Is this what you're looking for?
$('.thumb').hover(function(){
$(this)
.find('.text-js')
.fadeToggle()
.end()
.find('img')
.fadeToggle();
});
http://jsfiddle.net/Nq79H/4/
No JS or additional HTML needed.
http://jsfiddle.net/Nq79H/11
.thumb img {
-moz-transition: opacity .8s;
-webkit-transition: opacity .8s;
transition: opacity .8s;
}
.thumb:hover img {
opacity: 0;
}
My problem..
I have a number of images (inside hyperlinks), and I want each to darken on mouseover (i.e. apply a black mask with high opacity or something), and then go back to normal on mouseout . But I can't figure out the best way to do it.
I've tried..
Jquery color animate and some javascript references.
Setting the opacity of the image with javascript.
I don't want..
Image start at 80% opacity then go to 100% on mouseover (that's easy).
To swap between 2 images (one light & one dark), forgot the mention this sorry..
To reiterate..
I want in image (inslide a hyperlink) to darken on mouseover and then lose its darkness on mouseout.
Thoughts?
UPDATE :
This is my progress from suggestions. Looks fine in IE8, but not in FF3
<html>
<body>
<a href="http://www.google.com" style="background-color:black; opacity:1;filter:alpha(opacity=100)">
<img src="http://www.google.co.uk/intl/en_uk/images/logo.gif" width="200"
style="opacity:1;filter:alpha(opacity=100)" onmouseout="this.style.opacity=1;this.filters.alpha.opacity=100"
onmouseover="this.style.opacity=0.6;this.filters.alpha.opacity=60" />
</a>
</body>
</html>
Thoughts?
-- Lee
ANSWER
I'm going with this (seems to work in IE8 & FF)
<html>
<head>
<style type="text/css">
.outerLink
{
background-color:black;
display:block;
opacity:1;
filter:alpha(opacity=100);
width:200px;
}
img.darkableImage
{
opacity:1;
filter:alpha(opacity=100);
}
</style>
</head>
<body>
<a href="http://www.google.com" class="outerLink">
<img src="http://www.google.co.uk/intl/en_uk/images/logo.gif" width="200"
class="darkableImage" onmouseout="this.style.opacity=1;this.filters.alpha.opacity=100"
onmouseover="this.style.opacity=0.6;this.filters.alpha.opacity=60" />
</a>
</body>
</html>
Or, similar to erikkallen's idea, make the background of the A tag black, and make the image semitransparent on mouseover. That way you won't have to create additional divs.
CSS Only Fiddle (will only work in modern browsers)
JavaScript based Fiddle (will [probably] work in all common browsers)
Source for the CSS-based solution:
a.darken {
display: inline-block;
background: black;
padding: 0;
}
a.darken img {
display: block;
-webkit-transition: all 0.5s linear;
-moz-transition: all 0.5s linear;
-ms-transition: all 0.5s linear;
-o-transition: all 0.5s linear;
transition: all 0.5s linear;
}
a.darken:hover img {
opacity: 0.7;
}
And the image:
<a href="http://google.com" class="darken">
<img src="http://www.prelovac.com/vladimir/wp-content/uploads/2008/03/example.jpg" width="200">
</a>
Make the image 100% bright so it is clear.
And then on Img hover reduce it to whatever brightness you want.
img {
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
img:hover {
-webkit-filter: brightness(70%);
filter: brightness(70%);
}
<img src="http://dummyimage.com/300x150/ebebeb/000.jpg">
That will do it,
Hope that helps
I realise this is a little late but you could add the following to your code. This won't work for transparent pngs though, you'd need a cropping mask for that. Which I'm now going to see about.
outerLink {
overflow: hidden;
position: relative;
}
outerLink:hover:after {
background: #000;
content: "";
display: block;
height: 100%;
left: 0;
opacity: 0.5;
position: absolute;
top: 0;
width: 100%;
}
How about this...
<style type="text/css">
div.frame { background-color: #000; }
img.pic:hover {
opacity: .6;
filter:alpha(opacity=60);
}
</style>
<div class="frame">
<img class="pic" src="path/to/image" />
</div>
Put a black, semitransparent, div on top of it.
Create black png with lets say 50% transparency. Overlay this on mouseover.