I need to do One image change on hover to another .
i use this code:
<div id="cf">
<img class="bottom" src="https://s4.postimg.io/pv7t833bx/image.png" />
<img class="top" src="https://s3.postimg.io/zbzl74tsv/image.png" />
</div>
#cf {
position:relative;
height:200px;
width:118px;
margin:0 auto;
}
#cf 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;
}
#cf img.top:hover {
opacity:0;
}
I have problem that, i can see hover image (bottom), because top image is transparent. i need that hover image (bottom) only was seen when i hover it
Source of code: http://css3.bradshawenterprises.com/cfimg/
Use hover selector on the parent (#cf:hover) and not on the image.
#cf {
position:relative;
height:200px;
width:118px;
margin:0 auto;
}
#cf 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;
}
#cf img.top{
width: 200px;
}
#cf img.bottom{
opacity: 0;
}
#cf:hover img.top {
opacity:0;
}
#cf:hover img.bottom {
opacity:1;
}
<div id="cf">
<img class="bottom" src="https://s4.postimg.io/pv7t833bx/image.png" />
<img class="top" src="https://s3.postimg.io/zbzl74tsv/image.png" />
</div>
You could move the :hover state to #cf like so:
#cf {
position:relative;
height:200px;
width:118px;
margin:0 auto;
}
#cf 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;
}
#cf img.bottom {
opacity: 0;
}
#cf:hover img.top {
opacity:0;
}
#cf:hover img.bottom{
opacity: 1;
}
<div id="cf">
<img class="bottom" src="https://s4.postimg.io/pv7t833bx/image.png" />
<img class="top" src="https://s3.postimg.io/zbzl74tsv/image.png" />
</div>
Related
My css code is:
.logo
{
width: 20px;
height: 20px;
display: inline-block !important;
-webkit-transition: -webkit-transform .8s ease-in-out;
-ms-transition: -ms-transform .8s ease-in-out;
transition: transform .8s ease-in-out;
}
.logo:hover
{
transform:rotate(360deg);
-ms-transform:rotate(360deg);
-webkit-transform:rotate(360deg);
}
And html is:
<a class="navbar-brand" href="#">
<img src="img/logo200x200.png" class="logo" />
Website
</a>
JSFIDDLE
Can I make image rotate not only when my mouse is on image, but also when mouse is on text?
Make the :hover cover the whole a tag. In your example e.g. like this:
.navbar-brand:hover img {
...
}
https://jsfiddle.net/abvwh7aj/
Simply replace .logo:hover with a:hover .logo!
Here the working solution:
.logo {
width: 20px;
height: 20px;
display: inline-block !important;
-webkit-transition: -webkit-transform .8s ease-in-out;
-ms-transition: -ms-transform .8s ease-in-out;
transition: transform .8s ease-in-out;
}
a:hover .logo
{
transform:rotate(360deg);
-ms-transform:rotate(360deg);
-webkit-transform:rotate(360deg);
}
<a class="navbar-brand" href="#">
<img src="http://placehold.it/200x200.png" class="logo" />Website
</a>
I'm currently using a couple divs to style my background as well as style an overlay for hovering. The problem is that I'd like to create an additional div so that I can style a box on hover as well, but I'm not sure where to place the new div in the HTML without it screwing up my formatting (class .captionbox for example).
My code and JS Fiddle is below. Any help is appreciated.
JS Fiddle
body {
background: url('http://www.bootply.com/assets/example/bg_blueplane.jpg');
height:100%;
margin:0;
padding:0;
}
.bg {
position:fixed;
width:50%;
height:50%
}
#nw {
background-image: url('clevelandnight.jpg');
background-size:cover;
}
#ne {
top:0;
left:50%;
background-image: url('news1.jpg');
background-size:cover;
}
#sw {
top:50%;
left:0;
background-image: url('drinks1.jpg');
background-size:cover;
}
#se {
top:50%;
left:50%;
background-image: url('clevelandday.jpg');
background-size:cover;
}
.overlay {
height:100%;
text-align:center;
-webkit-transition:opacity .4s ease-out, height .4s ease-out, background .4s ease-out;
-moz-transition:opacity .4s ease-out, height .4s ease-out, background .4s ease-out;
-o-transition:opacity .4s ease-out, height .4s ease-out, background .4s ease-out;
-ms-transition:opacity .4s ease-out, height .4s ease-out, background .4s ease-out;
transition:opacity .4s ease-out, height .4s ease-out, background .4s ease-out;
}
.bg:hover .overlay {
background:rgba(0, 0, 0, .75);
opacity: 1;
height:100%;
}
.caption {
font-family: 'Open Sans Condensed', sans-serif;
font-weight:100;
color:white;
font-size:36pt;
white-space:nowrap;
-webkit-transition:font-size .4s ease-out 1s, color .4s ease-out 1s, margin-right .4s ease-out 1.4s;
-moz-transition:font-size .4s ease-out 1s, color .4s ease-out 1s, margin-right .4s ease-out 1.4s;
-o-transition:font-size .4s ease-out 1s, color .4s ease-out 1s, margin-right .4s ease-out 1.4s;
transition:font-size .4s ease-out 1s, color .4s ease-out 1s, margin-right .4s ease-out 1.4s;
}
.bg:hover .caption {
color:#7D7D7D;
font-size:72px;
white-space:nowrap;
margin-right:70%;
}
.captionbox {
height:100px;
width:100px;
background-color:white;
opacity:0;
border: 5px solid red;
}
<div id='nw' class='bg'>
<div class='overlay'>
<span class='caption'>Night Life</span>
</div>
</div>
<div id='ne' class='bg'>
<div class='overlay'>
<span class='caption'>News</span>
</div>
</div>
<div id='sw' class='bg'>
<div class='overlay'>
<span class='caption'>Food & Drink</span>
</div>
</div>
<div id='se' class='bg'>
<div class='overlay'>
<span class='caption'>Events</span>
</div>
</div>
If you make the div display:none it won't take up any space on the page. I presume as a caption box it's going to be position: absolute, so once that style is applied it won't affect your layout anyway. So you should be able to put it at the top level as a child of <body>.
I have 2 images that are changing when I hover on the first one.
On the second one, I have some text because I want a link there.
My problem is now that I want the hover image to remain when I hover over the link.
Here is my code:
#blur {
border: 1px solid #bebfc1;
position:relative;
height:450px;
width:300px;
margin:0 auto;
-webkit-transition: border 1s ease-in-out;
-moz-transition: border 1s ease-in-out;
-o-transition: border 1s ease-in-out;
transition: border 1s ease-in-out;
}
#blur 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;
}
#blur:hover {
z-index:2;
border: 1px solid #000000;
}
#blur img.top:hover {
opacity:0;
}
#blur .text {
position:absolute;
color:#bebfc1;
opacity: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;
font-family:"Segoe UI Light";
font-size:13px;
}
#blur:hover .text {
opacity:1;
}
<div id="blur">
<img class="bottom" src="http://s28.postimg.org/do5izc4gd/image.png" />
<img class="top" src="http://s28.postimg.org/a5tj2y3kd/image.png" />
<p class="text" style="bottom:6px; left:180px;">link</p>
</div>
When I hover over the link I want the red image to remain the same.
How can this be done?
Thanks !!!
DEMO here http://jsfiddle.net/VYR9q/
Okay, I fixed it in the fiddle line you provided :)
Here you are what I fixed:
#blur:hover .top {
opacity:0;
}
Instead of:
#blur img.top:hover {
opacity:0;
}
Edit from: #biziclop:
You can make it:
#blur:hover img.top
I think you should simply move :hover from the img to the common parent #blur
#blur img.top:hover {
to
#blur:hover img.top {
Live example: http://jsfiddle.net/VYR9q/2/
Change your css to :
#blur:hover img.top {
//your css
}
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
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.