I use below mention code to produce a CSS transition effect.
A div shows first image (i.e. 1.jpg), and upon mouse-hover the second image (2.jpg) is appear through CSS transition and when mouse-out the first image is back to display.
I need a third image on mouse-out so kindly help me how i do this through CSS.
My coding is as under:
.mainimg
{
background-image:url(1.jpg);
height: 300px;
width: 300px;
transition: 1s;
}
.img2
{
background-image:url(2.jpg);
background-size:500px 500px;
width:0px;
height:300px;
transition:1s
}
.mainimg:hover .img2
{
width:300px;
transition:1s;
}
<div class="mainimg">
<div class="img2"></div>
</div>
Try this out: use the same div for containing image
<div class="mainimg">
and use css hover to change image background
.mainimg {
background-image:url(1.jpg);
height: 300px;
width: 300px;
transition: 1s;
}
.mainimg:hover {
background-image:url(2.jpg);
transition: 1s;
}
The rollover is state is binary in CSS, an element is either being hovered over or it is not. You will need to use JavaScript for doing what you want.
what #Franz Thüs says is correct you have to use Javascript for the 3e image.
also what #Med7at is saying try using one div and change the image via the :hover
this should work for you.
I used an id instead of an class so only one item will change with those images.
i used colors so you can see the differents.
var mouseOut = document.getElementById("mainimg");
mouseOut.onmouseout = function() {
this.style.backgroundColor = "orange"; //this.style.background = "url(3.jpg)"
}
#mainimg{
background:blue; /*background-image:url(1.jpg);*/
height: 300px;
width: 300px;
transition: 1s;
}
#mainimg:hover{
background:red; /*background-image:url(2.jpg);*/
background-size:500px 500px; /* this will make the 3 img look missplaced for 1 second.
}
<div id="mainimg"></div>
see the comments what you should put in that line to make it work with the images.
Related
So here's the problem - i need an image to slightly change when the cursor is hovering on it. However, simply writing something like this in CSS styles:
img {src="";} img:hover {src="";}
seems to do nothing. Is there a solution to this problem using only HTML and CSS?
Thank you for your time!
You can use background-image property and change the url on hover
img {
height: 200px;
width: 200px;
background-image: url("https://pixy.org/src/477/4774988.jpg");
background-size: 200px 200px;
;
}
img:hover {
background-image: url("https://pixy.org/src/19/193722.jpg");
}
<img />
I'm trying to set a transition-delay to the overflow property of body when a div is clicked by adding a class to the body as follows:
$("div").click(function(){
$("body").addClass("no_overflow");
});
div{
background:lime;
height:2000px;
}
.no_overflow{
overflow:hidden;
}
body{
overflow:auto;
transition: overflow 0 2s;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>I'm div</div>
However, this doesn't seem to work (there's no delay). Am I doing anything wrong here?
I know this can be achieved by using setTimeout function, but was wondering why can't this be achieved using css transitions? Are there any specific style properties to which css transitions can be applied?
There are many properties that can't be transitioned. overflow is among them; the render engine has no idea how to transition between "hidden" and "shown", because those are binary options, not intervals. This is the same reason why you can't transition between display: none; and display: block; (for example): there are no in-between phases to use as transitions.
You can see a list of properties you can animate here on Mozilla Developer Network.
You can simulate a delay with animation:
$("div").click(function() {
$("body").addClass("no_overflow");
});
div {
background: lime;
height: 2000px;
}
.no_overflow {
overflow: hidden;
/* persist overflow value from animation */
animation: 7s delay-overflow;
}
body {
overflow: auto;
}
#keyframes delay-overflow {
from { overflow: auto; }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>I'm div</div>
You'll have to apply a separate animation to .body if you want a delay on removeClass, and also to take care that the two animations don't overlap or they'll cancel each other out.
overflow isn't CSS animatable property. You can see full list of animatable CSS properties there.
In case someone is looking at the answer, like I was, for a way to animate the cropping of an element which requires overflowing - here is the solution that worked for me: the clip-path css property which is animatable and very versatile.
Here is a cool tool to play around with, in order to get the proper start / end values for an animation: https://bennettfeely.com/clippy/.
Dmitry's answer should be the only accepted answer, as it is a pure CSS solution applying delay to "non-animatable" properties. However it's worth to mention, that the CSS rule applying animation should be "triggerable" each time when it is needed.
For instance, the following code does not work:
#keyframes show-overflow {
from { overflow: hidden; }
}
.hideable, .overlay {
font-size: 36px;
height: 50px;
}
.hideable {
transition: height 2s;
overflow: visible;
animation: show-overflow 2s; /* this line should be in separate "triggerable" CSS rule to work */
}
.hideable.hidden {
height: 0;
overflow: hidden;
}
<button onclick="document.getElementById('hideable').classList.toggle('hidden')">
Clik HERE to hide/show the text below
</button>
<div id='hideable' class='hideable'>
This is the text to hide and show.
</div>
<div class='overlay'>
This is overlaying text
</div>
But after moving the marked property to a separate CSS rule, everything works as expected:
#keyframes show-overflow {
from { overflow: hidden; }
}
.hideable, .overlay {
font-size: 36px;
height: 50px;
}
.hideable {
transition: height 2s;
overflow: visible;
}
.hideable:not(.hidden) {
animation: show-overflow 2s; /* now this works! */
}
.hideable.hidden {
height: 0;
overflow: hidden;
}
<button onclick="document.getElementById('hideable').classList.toggle('hidden')">
Clik HERE to hide/show the text below
</button>
<div id='hideable' class='hideable'>
This is the text to hide and show.
</div>
<div class='overlay'>
This is overlaying text
</div>
It makes sense that you can't transition between binary attributes for example overflow: hidden; and overflow: visible but it would have been really nice if instead of "transitioning" then it would be like (in js pseudo code:
setTimeout("applyOverflowVisible()", transitionTime);
But of course you can do this yourself in JavaScript but then you are splitting the code between places and it can make it difficult to understand by someone else. I guess using things like React helps but even there I would want to avoid mixing css into the js.
Notice that I need to declare the img source from the html (this will be dynamic), so i dont use background here.
HTML
<div class='some-form'>
<form>
<button>...<button>
<img id="some-img" src="something"/>
<input id="some-input"/>
</form>
</div>
CSS
.some-form {
display: block;
position: relative;
}
.some-form #some-input {
background-color: rgba(255,255,255,0);
border: 1px solid #2F2F2F;
width: 300px;
color: #000;
opacity: 1;
}
.some-form #some-img {
position:absolute;
background-color: #FFF;
z-index: -1;
//background-size: contain; //this does not work
//background-position: center right 50px; //so this will not work
}
How can I get the image to act like contain so that I can align it the way i want?
Keep your code as-is, but change #some-img from an img to a div (and specify width and height as needed based on the image dimensions). It's not possible (at least not in a simple way) to make an img element behave as if it was using background-size and background-position properties since img elements are not backgrounds. So in order to do so, you instead make the image a div with a background-image.
Since you are dynamically populating the image src, you can instead use inline styles to define a background-image on the div, as this lets you call a PHP or other server-side function to echo the image url (which you can't do in a CSS file).
So for example, keep the CSS you have now (but add height/width or other styles to the #some-img div as needed) but replace <img id="some-img" src="something"/> with something like this:
<div style="background-image: url(<?php theDynamicImageURL(); ?>);"></div>
or equivalent in whatever language or method you are using to populate the image dynamically.
There are better ways to do this as inline CSS is generally something that should be avoided, but the use in this case is not too dangerous but it'll work in a pinch and most other methods would either be equally sloppy or a lot more work.
If you include jquery, you can write a script to cheat this:
<script type="text/javascript">
height = $('#some-img').height();
width = $('#some-img').width();
src = $('#some-img').attr('src');
$('#sime-img').wrap('<div id="contain"></div>');
$('#contain').height(height).width(width);
$('#contain').css('background',"url('" + src + "')");
$('#contain').css('background-sizing','contain');
$('#some-img').css('opacity','0');
</script>
It isn't nice. You can do the same thing w/o JQuery, I just used it for convenience.
If I understand correctly, you're looking to constrain an image to the size of its containing element and center it vertically and horizontally.
This will get you pretty close, but the image will only scale up to its actual size, no bigger.
HTML
<div class='some-form'>
<form>
<button></button>
<img id="some-img" src="http://lorempixel.com/300/200/sports"/>
<input id="some-input" />
</form>
</div>
CSS
.some-form {
display: block;
position: relative;
width:400px;
height:180px;
background: rgba(255,255,0,.1); /* for checking that it fits*/
}
.some-form #some-input {
background-color: rgba(255,255,255,0);
border: 1px solid #2F2F2F;
width: 300px;
color: #000;
opacity: 1;
}
.some-form #some-img {
position:absolute;
background-color: #FFF;
top:0;
bottom:0;
left:0;
right:0;
margin:auto auto;
max-width:100%;
max-height:100%;
z-index: -1;
}
fiddle: http://jsfiddle.net/XNR38/
Good luck!
i have two images of text. one with regular text and the other with the same text but with glow effect.
the thing is i want the glow image to replace the regular one while hover.
but instead the glow image appears in addition to the regular one.
please help!!
thanx in advance
here is the code... the background-image attribute is in a comment block because the regular text image is defined as the img src int the html file
#groundPlainLink
{
height:56px;
width: 170px;
margin-left:476px;
float:left;
/*background-image:url("../images/txt_menu_ground_plane_pc.png");*/
}
#groundPlainLink:hover
{
background-image: url("../images/txt_menu_ground_plane_glow_pc.png");
}
It appears in addition, because the IMG element renders above the background image. Why not just use CSS, and skip the IMG element?
You have to hide the image on hover.
#groundPlainLink img:hover { opacity:0; }
However, as mentioned above, it'd be easier and simpler to remove the img and rely on background images for this.
EDIT: Or, style the element instead of the div element, then put text inside the link with a font-size:0. That'd do what you're looking for and still be good for screen readers/accessibility/SEO.
a fiddle
https://jsfiddle.net/Hastig/jd23mcnx/
html
<a class="image-link">
<img class="image-default" src="http://i.imgur.com/c0lfxLU.png">
<img class="image-hover" src="http://i.imgur.com/yfNIfVR.jpg">
</a>
css
.image-link {
display: block;
width: 500px;
margin: 20px auto 0px auto;
}
.image-link img {
width: 500px; height: 300px;
}
.image-hover {
display: none;
}
.image-link:hover .image-default {
displaY: none;
}
.image-link:hover .image-hover {
display: block;
}
I am using CSS for hover and it works, but the hover image allow the background image (pic_normal) to display like transparent behind the image(pic_hover).
How to display only the hover image when mouse over on it?
HTML
<img id="first" src="images/clients/pic_normal.png" />
CSS
#first img:hover {
background-image: url("/images/clients/pic_hover.png");
background-repeat: no-repeat;
}
Your CSS works just fine as intended - it changes the background of your img element. Think about the pic_normal.png as the content of your element (e.gg. some text). When you changing the background the content doesn't change.
Try this instead - http://jsfiddle.net/WvKye/
<div id="first"></div>
#first {
background: url("images/clients/pic_normal.png") no-repeat;
height: 300px;
width: 300px;
}
#first:hover {
background: url("images/clients/pic_hover.png") no-repeat;
}
Use this:
<img onMouseOver="this.src='images/clients/pic_normal.png'"
onMouseOut="this.src='images/clients/pic_normal.png'"
src="images/clients/pic_normal.png"/>
I think u need some javascript for that
Using Jquery u can do like this
$("#first").hover(function()
{
$(this).attr("src","/images/clients/pic_hover.png");
},function()
{
$(this).attr("src","/images/clients/pic_normal.png");
}
);