I have an onmouseover and onmouseout image in my html. And it totally does its job. What I do still struggle with is adding a transition to the onmouse stuff so it doesn't change so quickly. I would like it to fade over into the other picture when you hover over the picture. Is something like this possible?
This person did something like that but it didn't work for me :( :
[Change transition time on onmouseover and onmouseout?
Check my code and please help me if there is a simple solution. Best would be without java script...
<html>
<body>
<div class="startpageicons">
<div class="icongestaltung">
<img src="images/startpageicon_draw.png" onmouseover="this.src='images/startpageicon_gestaltungunddesign.png'" onmouseout="this.src='images/startpageicon_draw.png'" style="transition: -webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;">
</div>
</body>
</html>
Changing the src of an image won't trigger css transition. Here is a pure css solution you can try. You can use a div as the container and set the background-image on hover.
.icongestaltung {
background: url(http://www.iconsdb.com/icons/preview/orange/stackoverflow-6-xxl.png) center center no-repeat;
background-size: contain;
width: 150px;
height: 150px;
-webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
}
.icongestaltung:hover {
background-image: url("http://www.iconsdb.com/icons/preview/gray/stackoverflow-xxl.png");
}
<html>
<body>
<div class="startpageicons">
<div class="icongestaltung"></div>
</div>
</body>
</html>
Related
I've been trying to create the following: Showing an image and when hovering over it, on the image a score will show, which fades in. I'm almost there, except for the fading in part.
My CSS:
.profile-image10 {
opacity: 1;
}
.profile-image10:hover .overlay {
position: absolute;
width: 100%;
height: 100%;
left: 510px;
top: 8px;
z-index: 2;
background: transparent url('http://www.defilmkijker.com/wp-content/uploads/2018/01/overlayscore10.png') no-repeat;
-webkit-transition: opacity 1s ease-in;
-moz-transition: opacity 1s ease-in;
-ms-transition: opacity 1s ease-in;
-o-transition: opacity 1s ease-in;
transition: opacity 1s ease-in;
opacity: 0.1;
}
<div class="profile-image10">
<img src="https://www.w3schools.com/howto/img_fjords.jpg" />
<span class="overlay"></span>
</div>
I've created this fiddle:
https://jsfiddle.net/1wusom4m/
As you can see it currently fades out when hovering, which is the opposite of what I want. So of course the opacity is set the wrong way around, but if I set it to a low value in the .profile-image10 it affects the original image as well. I'm quite new to this, so have been experimenting a lot to get this far, but I'm stuck now. So how can I make it fade in the score when hovering over the image? Or am I approaching this all wrong?
Three things.
Don't depend all style properties for your overlay on :hover state. Only those you want to change on :hover of the image.
Always define the transition property for the original state. You can change the reverse transition by additionally specifying it on the :hover state.
You div is a block level element, which by default grabs as much horizontal space as available. Putting the :hover on the div results in the fade effect being triggered even if you hover right of the picture (which probably is unwanted).
.profile-image10 .overlay{
opacity: 0;
position: absolute;
width: 100%;
height: 100%;
left: 585px;
top: 8px;
z-index: 2;
background: transparent url('http://www.defilmkijker.com/wp-content/uploads/2018/01/overlayscore10.png') no-repeat;
-webkit-transition: opacity 1s ease-in;
-moz-transition: opacity 1s ease-in;
-ms-transition: opacity 1s ease-in;
-o-transition: opacity 1s ease-in;
transition: opacity 1s ease-in;
}
.profile-image10 a:hover + .overlay {
opacity: 1;
}
<div class="profile-image10">
<img src="http://www.defilmkijker.com/wp-content/uploads/2018/01/Recensie-Three-Billboards-Outside-Ebbing-Missouri.jpg" class="alignnone size-full wp-image-19857 round" />
<span class="overlay"></span>
</div>
Fiddle: https://jsfiddle.net/1wusom4m/3/
I am trying to set the transition for the portfolio section of my web, I need the effects on hover for portfolio thumbs and i have the following codes in CSS:
.proimg img {
height: 100%;
max-width: 100%;
}
.proimg img:hover {
opacity: 0.5;
filter: alpha(opacity=50);
transition: all 0.55s ease-in-out;
}
That's the portfolio page http://goo.gl/Gaja7v
On hover, images didn't look good. Transition works but it messed up the thumbs, doesn't look good. I would like to make the transition to similar as this website http://goo.gl/0hb56Z
Anyone can help?
First of all, you have to resize list images for that!
--
I recommend jQuery, fadeTo function
//you have to include jquery lib
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
//HTML :
<img src="http://pjvarquitetura.com.br/wp-content/uploads/casad.jpg">
//Javascript :
<script>
$('img').mouseenter(function() {
$(this).fadeTo('fast', 0.7);
}).mouseleave(function(){
$(this).fadeTo('fast', 1);
});
</script>
you can get more information about fade to function
- http://www.w3schools.com/jquery/eff_fadeto.asp
If you don't want to use fadeTo function.
//CSS
.fadeeffect {
-webkit-transition: opacity 250ms ease-in-out;
-moz-transition: opacity 250ms ease-in-out;
-o-transition: opacity 250ms ease-in-out;
transition: opacity 250ms ease-in-out;
}
//Javascript
$(document).ready(function() {
$('img').mouseenter(function() {
$(this).css('opacity', 0.7);
}).mouseleave(function(){
$(this).css('opacity', 1);
});
});
//HTML
<img class="fadeeffect" id="a" src="http://pjvarquitetura.com.br/wp-content/uploads/casad.jpg">
It's easy to think of the transition property as an "action": eg, "When this :hover state begins, transition the given properties." But you really need to think of it as a constant state, which means "when the following properties change, for any reason, transition them in this manner."
So you really want the transition property to be on your first CSS rule, so that it always applies. Otherwise, the transition is only when the mouse starts to hover, not when it leaves.
You need to set the transition property to your img as well:
.proimg img {
height: 100%;
max-width: 100%;
transition: all 0.55s ease-in-out; /* this line */
}
.proimg img:hover {
opacity: 0.5;
filter: alpha(opacity=50);
transition: all 0.55s ease-in-out;
}
http://codepen.io/anon/pen/ZbPKVR
This is explained by Katana314's answer.
How would I go about hovering over an image that then blurs the background image behind it within css? The way I have it set up now is the background image blurs upon hover.
Here's my css:
.blur 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;
}
.blur img:hover {
-webkit-filter: blur(5px);
}
.wrapper{
width:900x;
height: 100px;
position: absolute;
top: 2400px;
z-index: 50;
}
.logo{
postion: absolute;
margin: 0 auto;
top: 2420px;
z-index: 50;
left: 400px;
}
html:
<div class="blur"><img src="/homepic1.jpg"></div>//This is the image I want blurred
<div class="wrapper">
<div class="row">
<div class="span12 pagination-centered">
<img src="/transparanetsnu.png">//How do I hover over any of these images to trigger a blur on "homepic1.jpg"
</div>
<div class="span4 offset3">
<div class="box2"><img src="/greek_logo.gif"></div>
</div>
<div class="logo"><img src="/UM-Main-Logo-Maroon.gif">
</div>
I think the best way is to use JQuery. All images and add a class like 'blur' to them everytime user hover over one image, but you should remove the class from the one you don't want.
$('.img1').mouseover(function(){
$('img').addClass('blur');
$('.img1').removeClass('blur');
});
Add the effect using css or javascript.
Use jQuery for that purpose.
First of all dowload jQuery from: http://code.jquery.com/jquery-1.10.2.min.js
Then.
$('.yourImage').mouseover(function(){ //'.yourImage' are the last three images in your case.
$('.homepic1').addClass('blur'); //'.homepic1' is the class of first image in your case
});
.addClass('blur') , Will add the class 'blur' from your CSS to that '.homepic1' element, As soon as your mouse hovers over ANY of the three images.
I'm trying to make a picture over picture fading with some text appearing on them purely with CSS3. I took the basic fading from here: http://css3.bradshawenterprises.com/cfimg1/
Now what I'm trying to do is, that when I hover the picture, then not only an other picture fades in, but some text too what contains a clickable link (for ie. a download link). The first problem was that the text appeared outside the div, which I could fix by adding this:
.crossfade h1 {
position: absolute;
}
I use h1, because paragraphs don't appear at all. So after this, I got the fading right, and even the text is in it's place, but it's not selectable and not clickable, it appears like it's a part of the image.
Here's my code so far (the html and the css part too):
<div class="crossfade">
<img class="bottom" src="pics\hover.jpg" />
<h1>Title</h1>
<img class="top" src="pics\23.jpg" />
</div>
.crossfade {
position:relative;
height:200px;
width:200px;
margin:0 auto;
}
.crossfade img {
position:absolute;
left: 0;
-webkit-transition: opacity 0.2s ease-in-out;
-moz-transition: opacity 0.2s ease-in-out;
-o-transition: opacity 0.2s ease-in-out;
-ms-transition: opacity 0.2s ease-in-out;
transition: opacity 0.2s ease-in-out;
}
.crossfade img.top:hover {
opacity: 0;
}
.crossfade h1 {
position: absolute;
}
Any help or ideas on it would be greatly appreciated.
Thanks in advance.
http://jsfiddle.net/3tkWj/5/
I just added another :hover and z-index.
.crossfade img.top:hover, .crossfade p:hover+img {
opacity: 0;
}
edit : Here's a working exemple of what you want (see comments)
http://jsfiddle.net/3tkWj/12/
Beware, I trimed the CSS.
i have a problem using css3 transitions
how can i make the transition smooth it appears instantly
i want the div box to slowly change its height when i hover over it
the html code
<div id="imgs">
<img src="http://chat.ecobytes.net/img/emoticons/smile.png" alt=":)" title=":)" />
<img src="http://chat.ecobytes.net/img/emoticons/sad.png" alt=":(" title=":(" />
<img src="http://chat.ecobytes.net/img/emoticons/wink.png" alt=";)" title=";)" />
<img src="http://chat.ecobytes.net/img/emoticons/razz.png" alt=":P" title=":P" />
<img src="http://chat.ecobytes.net/img/emoticons/grin.png" alt=":D" title=":D" />
<img src="http://chat.ecobytes.net/img/emoticons/plain.png" alt=":|" title=":|" />
<img src="http://chat.ecobytes.net/img/emoticons/surprise.png" alt=":O" title=":O" />
<img src="http://chat.ecobytes.net/img/emoticons/confused.png" alt=":?" title=":?" />
<img src="http://chat.ecobytes.net/img/emoticons/glasses.png" alt="8)" title="8)" />
<img src="http://chat.ecobytes.net/img/emoticons/eek.png" alt="8o" title="8o" />
<img src="http://chat.ecobytes.net/img/emoticons/cool.png" alt="B)" title="B)" />
<img src="http://chat.ecobytes.net/img/emoticons/smile-big.png" alt=":-)" title=":-)" />
</div>
jsfiddle
I believe you need to set a specified height instead of auto. http://jsfiddle.net/BN4Ny/ this does a smooth expansion. Not sure if you wanted that little close open effect though. I just forked your jsfiddle and added a specified height.
This solution does not need javascript or have the problem of needing to have a fixed height for the container before hand.
This is made possible by using max-height property and setting its value to a high value.
#imgs {
border:1px solid #000;
border-radius:3px;
max-height:20px;
width:100%;
overflow:hidden;
transition: 2s ease;
}
#imgs:hover {
max-height:15em;
}
<div id="imgs">
<img src="https://sslb.ulximg.com/image/405x405/artist/1346353449_4159240d68a922ee4ecdfd8e85d179c6.jpg/e96a72d63f272127d0b6d70c76fd3f61/1346353449_eminem.jpg" />
</div>
Instead of using a set height on a container or using JS (which are both awkward solutions)... You can put the images in list items and work your transition on the li.
If all the images are going to a similar height it means your content inside the container can still be dynamic. For example...
/*
CLOSED
*/
div.container li
{ height:0px;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;}
/*
OPEN
*/
div.container:hover li
{ height:30px;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;}
Here's how you can do it: http://jsfiddle.net/minitech/hTzt4/
To keep a flexible height, JavaScript is a necessity, unfortunately.
well I'm using this method:
use max height to transition height instead of the height directly...
for example:
div {
height: auto;
max-height:0;
}
.toggle-above-div:hover div {
max-height:0;
}