I followed a tutorial exactly and instead of fading from the Print_tab.png to the Print_tab_hover.png,
it just fades to white. Any way I could fix this (without using javascript)?.
Here is the code i Used:
HTML:
<div id="print"
<img class="bottom" src="images/print_tab_hover.png" />
<img class="top" src="images/print_tab.png" />
</div>
CSS:
#print {
position:relative;
width: 300px;
height: 169px;
margin: 0 auto;
}
#print 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;
-ms-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
}
#print img.top:hover {
opacity: 0;
}
This works:
#print {
position:relative;
width: 200px;
height: 120px;
margin: 0 auto;
background-image: url(http://fc06.deviantart.net/images2/i/2004/07/e/7/Firefox_dock_icon.png);
}
#print img {
position: absolute;
left: 0;
width: 200px;
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
-ms-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
}
#print img.top:hover {
opacity: 0;
}
<div id="print">
<img class="top" src="http://lanscaping-ideas.com/wp-content/uploads/2012/04/Landscape-Paintings-2.jpg" />
</div>
Just set a default background for the #print and fade over the new image, or vise versa.
Related
For visualization of the intended effect, go near the bottom of this site, at the "Catering Services" section, and hover over the three images.
I want my images, on hover, to zoom-in -- increase in height and width -- while the frame around it shrinks, with overflow:hidden ofcourse.
Here's what I have written so far:
<style type="text/css">
.container {
float: left;
width: 50%;
margin: 0 auto;
}
.frame {
width: 80%;
height: 50%;
overflow: hidden;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
.frame:hover {
width: 70%;
height: 45%;
}
.frame > img {
width: 100%;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
.frame:hover {
width: 120%;
}
</style>
<div class="container">
<div class="frame">
<img src="http://www.rd.com/wp-content/uploads/sites/2/2016/04/01-cat-wants-to-tell-you-laptop.jpg" alt="Image of a dumb cat sitting on a laptop" title="get off my laptop" />
</div>
</div>
<!---End of container-->
The height of the frame is shrinking but not the width. Moreover, I want the image to expand on all four sides, and the frame to shrink likewise. Can this be achieved with something other than transitions? Any suggestions or tips on how should I go about solving this?
Just animate the img's transform:scale() and you should be all set.
Hope it helps!
.container {
float: left;
width: 50%;
margin: 0 auto;
}
.frame {
width: 80%;
height: 50%;
overflow: hidden;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
.frame:hover {
width: 70%;
height: 45%;
}
.frame > img {
width: 100%;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
.frame:hover img {
transform: scale(2);
}
<div class="frame">
<img src="http://www.rd.com/wp-content/uploads/sites/2/2016/04/01-cat-wants-to-tell-you-laptop.jpg" alt="Image of a dumb cat sitting on a laptop" title="get off my laptop" />
</div>
I have 4 divs floating left next to each other with a set hover width transition, three divs are the same width but the fourth is smaller. When you hover up on the div it gets bigger and I need the rest to reduce the width automaticaly to the set reduced-width value.
Here is the code
.container1 {
position: relative;
height: 600px;
width: 29%;
top: 0px;
left: 0%;
float: left;
z-index: 99;
opacity: 1;
background-repeat: no-repeat;
background-size: cover;
background-position: center;
border-right: #000 4px solid;
transition: all 300ms ease-in-out;
-o-transition: all 300ms ease-in-out;
-moz-transition: all 300ms ease-in-out;
-webkit-transition: all 300ms ease-in-out;
}
.container1:hover {
width: 40%;
transition: all 300ms ease-in-out;
-o-transition: all 300ms ease-in-out;
-moz-transition: all 300ms ease-in-out;
-webkit-transition: all 300ms ease-in-out;
}
.container1 .reduced-width {
width: 20%;
transition: all 300ms ease-in-out;
-o-transition: all 300ms ease-in-out;
-moz-transition: all 300ms ease-in-out;
-webkit-transition: all 300ms ease-in-out; }
#image1 {
background: url("../img/bg1.jpg");
}
.container2 {
position: relative;
height: 600px;
width: 29%;
top: 0px;
left: 0%;
float: left;
z-index: 99;
opacity: 1;
background-repeat: no-repeat;
background-size: cover;
background-position: center;
border-right: #000 4px solid;
transition: all 300ms ease-in-out;
-o-transition: all 300ms ease-in-out;
-moz-transition: all 300ms ease-in-out;
-webkit-transition: all 300ms ease-in-out;
}
.container2:hover {
width: 40%;
transition: all 300ms ease-in-out;
-o-transition: all 300ms ease-in-out;
-moz-transition: all 300ms ease-in-out;
-webkit-transition: all 300ms ease-in-out;
}
.container2 .reduced-width {
width: 20%;
transition: all 300ms ease-in-out;
-o-transition: all 300ms ease-in-out;
-moz-transition: all 300ms ease-in-out;
-webkit-transition: all 300ms ease-in-out; }
#image2 {
background: url("../img/bg2.jpg");
}
.container3 {
position: relative;
height: 600px;
width: 29%;
top: 0px;
left: 0%;
float: left;
z-index: 99;
border-right: #000 4px solid;
background-repeat: no-repeat;
background-size: cover;
background-position: center;
transition: all 300ms ease-in-out;
-o-transition: all 300ms ease-in-out;
-moz-transition: all 300ms ease-in-out;
-webkit-transition: all 300ms ease-in-out;
}
.container3:hover {
width: 40%;
transition: all 300ms ease-in-out;
-o-transition: all 300ms ease-in-out;
-moz-transition: all 300ms ease-in-out;
-webkit-transition: all 300ms ease-in-out;
}
.container3 .reduced-width {
width: 20%;
transition: all 300ms ease-in-out;
-o-transition: all 300ms ease-in-out;
-moz-transition: all 300ms ease-in-out;
-webkit-transition: all 300ms ease-in-out;
}
#image3 {
background: url("../img/bg3.jpg");
}
.container4 {
position: relative;
height: 600px;
width: 13%;
top: 0px;
left:0%;
z-index: 999;
float: right;
opacity: 1;
background-repeat: no-repeat;
background-size: cover;
background-position: center;
border-right: #000 4px solid;
transition: all 300ms ease-in-out;
-o-transition: all 300ms ease-in-out;
-moz-transition: all 300ms ease-in-out;
-webkit-transition: all 300ms ease-in-out;
}
.container4:hover {
width: 30%;
transition: all 300ms ease-in-out;
-o-transition: all 300ms ease-in-out;
-moz-transition: all 300ms ease-in-out;
-webkit-transition: all 300ms ease-in-out;
}
#image4 {
background: url("../img/3.jpg");
}
And the HTML
<div class="container1 animated bounceInLeft reduced-width" id="image1">
</div>
<div class="container2 animated bounceInDown reduced-width" id="image2">
</div>
<div class="container3 animated bounceInDown reduced-width" id="image3">
</div>
<div class="container4 animated bounceInRight reduced-width" id="image4">
</div>
when you are targeting 2 classes you should do it without spaces( like you did .container1 .reduced-width it should be .container1.reduced-width)
set width in such a way that your design won't break.. like your width of all containers should be 24%(as you have 4px border too) so that total will be equal or less than 100%.
You should write least css and target more elements. like you are targeting a particular div everytime which is not advisible.. you could use reduced with class only once and it would have set the size everytime.
this could be your reduced/optimized code:
HTML:
<div class="container animated bounceInLeft" id="image1"></div>
<div class="container animated bounceInDown" id="image2"></div>
<div class="container animated bounceInDown" id="image3"></div>
<div class="container animated bounceInRight" id="image4"></div>
CSS:
.container {
position: relative;
height: 600px;
width: 24%;
top: 0px;
left: 0%;
float: left;
z-index: 99;
opacity: 1;
background-repeat: no-repeat;
background-size: cover;
background-position: center;
border-right: #000 4px solid;
transition: all 300ms ease-in-out;
-o-transition: all 300ms ease-in-out;
-moz-transition: all 300ms ease-in-out;
-webkit-transition: all 300ms ease-in-out;
background-color:red;
}
.container:hover {
width: 40%;
transition: all 300ms ease-in-out;
-o-transition: all 300ms ease-in-out;
-moz-transition: all 300ms ease-in-out;
-webkit-transition: all 300ms ease-in-out;
}
.container.reduced-width {
width: 20%;
transition: all 300ms ease-in-out;
-o-transition: all 300ms ease-in-out;
-moz-transition: all 300ms ease-in-out;
-webkit-transition: all 300ms ease-in-out; }
#image1 {
background: red;
}
#image2 {
background: yellow;
}
#image3 {
background: green;
}
#image4 {
background: blue ;
}
Here is CodePen Link
You don't need to do all that stuff for doing what you want. You can do it without any Javascript or jQuery using just CSS3.
Wrap your divs in a container.
Apply display: flex for the container.
Apply flex: 1 1 to the children. This is important.. do not give any flex-basis.. let it default.
Give a width: 100%; to children, they will automatically grow/shrink to available space.
Apply flex: 1 1 <your-width> for :hover on children. That's it.
Demo Fiddle: http://jsfiddle.net/abhitalks/xghqmq6u/
See this snippet:
.wrap {
width: 100%;
display: flex;
flex-direction: columns;
}
.floaters {
flex: 1 1 0%;
height: 120px; width: 100%;
transition: all 500ms;
}
.floaters:hover { flex: 1 1 50%; }
.container1 { background-color: #f00;}
.container2 { background-color: #0f0;}
.container3 { background-color: #00f;}
.container4 { background-color: #ccc;}
<div class="wrap">
<div class="container1 floaters" id="image1"></div>
<div class="container2 floaters" id="image2"></div>
<div class="container3 floaters" id="image3"></div>
<div class="container4 floaters" id="image4"></div>
</div>
This is how you can fix it.
HTML (you don't need a wrapper)
<div class="container1 animated bounceInLeft" id="image1"></div>
<div class="container2 animated bounceInDown" id="image2"></div>
<div class="container3 animated bounceInDown" id="image3"></div>
<div class="container4 animated bounceInRight" id="image4"></div>
CSS
.container {
position: relative;
height: 600px;
width: 24%;
top: 0px;
left: 0%;
float: left;
z-index: 99;
opacity: 1;
background-repeat: no-repeat;
background-size: cover;
background-position: center;
border-right: #000 4px solid;
transition: all 300ms ease-in-out;
-o-transition: all 300ms ease-in-out;
-moz-transition: all 300ms ease-in-out;
-webkit-transition: all 300ms ease-in-out;
background-color:red;
}
.container:hover {
width: 35%;
transition: all 300ms ease-in-out;
-o-transition: all 300ms ease-in-out;
-moz-transition: all 300ms ease-in-out;
-webkit-transition: all 300ms ease-in-out;
}
.container.reduced-width {
width: 20%;
transition: all 300ms ease-in-out;
-o-transition: all 300ms ease-in-out;
-moz-transition: all 300ms ease-in-out;
-webkit-transition: all 300ms ease-in-out; }
#image1 {
background: red;
}
#image2 {
background: yellow;
}
#image3 {
background: green;
}
#image4 {
background: blue ;
}
And of course you need Javascript (Jquery here)
$('.animated').mouseenter(function(){
console.log('here');
$(this).removeClass('reduced-width').siblings('.animated').addClass('reduced-width');
}).mouseout(function(){
$('.animated').removeClass('reduced-width');
});
EDIT: now the 4th column has a smaller width
Here is an example how you could fix it: http://jsfiddle.net/intergalactic_overlords/0hLmrme4/
Html needs a wrapper. When hovering the wrapper, children (the containers) width is set to 20%. When hovering a specific container, its width is set to 40%.
<div class="container-wrap">
<div class="container container1 animated bounceInLeft reduced-width" id="image1">
</div>
<div class="container container2 animated bounceInDown reduced-width" id="image2">
</div>
<div class="container container3 animated bounceInDown reduced-width" id="image3">
</div>
<div class="container container4 animated bounceInRight reduced-width" id="image4">
</div>
</div>
CSS:
.container {
background:snow;
box-sizing:border-box;
position: relative;
height: 600px;
width: 23%;
float: left;
z-index: 99;
background-repeat: no-repeat;
background-size: cover;
background-position: center;
border-right: #000 4px solid;
transition: all 300ms ease-in-out;
-o-transition: all 300ms ease-in-out;
-moz-transition: all 300ms ease-in-out;
-webkit-transition: all 300ms ease-in-out;
}
.container-4 {
width: 21%;
}
.container-wrap:hover > div {
width: 21%;
}
.container-wrap:hover > .container4 {
width: 16%;
}
.container-wrap > .container:hover {
background: yellow;
width: 42%;
transition: all 300ms ease-in-out;
-o-transition: all 300ms ease-in-out;
-moz-transition: all 300ms ease-in-out;
-webkit-transition: all 300ms ease-in-out;
}
.container-wrap > .container4:hover {
background: yellow;
width: 37%;
transition: all 300ms ease-in-out;
-o-transition: all 300ms ease-in-out;
-moz-transition: all 300ms ease-in-out;
-webkit-transition: all 300ms ease-in-out;
}
I'd like for the my background image to increase from .1 opacity to .5 opacity when a user hovers over my div.
HTML
<div id="list">
<div class="line_one">om nom nom nom...</div>
<div class="line_two">18 foods to make you incredibly hungry</div>
</div>
CSS
#list {
display:block;
position: relative;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
#list::after {
content: "";
background: url('test.jpg');
opacity: 0.1;
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
z-index: -1;
}
There must be a way to do this without Javascript. Any ideas?
Of course there is.
#list::after {
transition: opacity 1s ease;
}
#list:hover::after {
opacity: 0.5;
}
So, here is the deal.. I have a simple radio and a hidden div
<input type="radio" name="picture" id="radio-id" selected="false">
<label id="label-id" for="radio-id"></label>
<div class="some-class">
</div>
with CSS:
.some-class{
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 100%;
display:none;
background: white;
opacity: 0.7;
-webkit-transition: all 1s linear;
-moz-transition: all 1s linear;
-ms-transition: all 1s linear;
-o-transition: all 1s linear;
transition: all 1s linear;
}
#radio-id:checked ~ .some-class{
display: block;
background: rgb( 40, 44, 47 );
}
The problem here is that, when the radio is checked, there is no transition at all. The Div appears with the new background, but its not smoothly.
Replace the css with the following
#radio-id:checked ~ .some-class {
display: block;
background: rgb( 40, 44, 47 );
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 100%;
opacity: 0.7;
-webkit-transition: all 1s linear;
-moz-transition: all 1s linear;
-ms-transition: all 1s linear;
-o-transition: all 1s linear;
transition: all 1s linear;
}
html
<html>
<input type="radio" name="picture" id="radio-id" selected="false">
<label id="label-id" for="radio-id"></label>
<div class="some-class">
hello
</div>
</html>
Css
.some-class{
position: fixed;
top: 100px;
left: 100px;
height:100px;
width: 100px;
display:none;
background: white;
opacity: 0.7;
-webkit-transition: all 1s linear;
-moz-transition: all 1s linear;
-ms-transition: all 1s linear;
-o-transition: all 1s linear;
transition: all 1s linear;
}
#radio-id:checked ~ .some-class{
display: block;
background: rgb( 40, 44, 47 );
}
How would I make it so that if you hover over an image, the entire image changes to the color black (the image link must be in the HTML tag as the sizes and images are different)?
Here's what I have:
HTML:
<img src="http://www.floral-directory.com/flower.gif" class="image" />
CSS:
.image {
width: 250px;
}
.image:hover {
background: #000000;
}
The easiest way to do this is to wrap the img element in another, for example a span:
<span class="imgWrap">
<img src="http://www.floral-directory.com/flower.gif" class="image" />
</span>
And couple that to the CSS:
.imgWrap {
display: inline-block;
border: 1px solid #000;
}
.imgWrap:hover {
background-color: #000;
}
img:hover,
.imgWrap:hover img {
visibility: hidden;
}
JS Fiddle demo.
And, if you'd like to make it a little prettier, using transitions to fade in/out:
.imgWrap {
display: inline-block;
border: 1px solid #000;
background-color: #fff;
-moz-transition: all 1s linear;
-ms-transition: all 1s linear;
-o-transition: all 1s linear;
-webkit-transition: all 1s linear;
transition: all 1s linear;
}
.imgWrap img {
opacity: 1;
-moz-transition: all 1s linear;
-ms-transition: all 1s linear;
-o-transition: all 1s linear;
-webkit-transition: all 1s linear;
transition: all 1s linear;
}
.imgWrap:hover {
background-color: #000;
-moz-transition: all 1s linear;
-ms-transition: all 1s linear;
-o-transition: all 1s linear;
-webkit-transition: all 1s linear;
transition: all 1s linear;
}
img:hover,
.imgWrap:hover img {
opacity: 0;
-moz-transition: all 1s linear;
-ms-transition: all 1s linear;
-o-transition: all 1s linear;
-webkit-transition: all 1s linear;
transition: all 1s linear;
}
JS Fiddle demo.
The HTML
<div class="change_bg">
<img src="http://eofdreams.com/data_images/dreams/image/image-07.jpg" >
</div>
The CSS
.change_bg img{
max-width : 300px;
}
.change_bg{
width : 300px;
height : 300px;
float:left;
}
.change_bg img:hover{
visibility : hidden;
}
.change_bg:hover {
background : #bc7d89;
}
Live Example # http://cdpn.io/Bmthc