0

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;"><a href="#">link</a></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/

3
  • Your jsfiddle link dose nit have any image
    – Saeed
    Jan 5, 2014 at 12:54
  • yes it does, one it's full red one full blue
    – Robo374
    Jan 5, 2014 at 12:58
  • I say that your jsfiddle file is incorrect,change it to review your code
    – Saeed
    Jan 5, 2014 at 12:59

3 Answers 3

1

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
1
  • @Robo374 You are welcome. Please if this helped you, make this answer the correct one. Thanks Jan 5, 2014 at 14:47
1

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/

0

Change your css to :

#blur:hover img.top {
   //your css
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.